ArchCode
ArchCode Architecture & interior Vue Template
Thank you for purchasing this Vue template.
If you like this template, Please support us by rating this template with 5 stars
Package Installation & Setup -
1.- Install npm
It will create 'node_module' folder in this all dependency files will be install with this command. npm install
npm install
2.- Run Project
With is command file will be compiled and it will be loaded on local server `http://localhost:5173/`: npm run dev
npm run dev
3.- Production Build
You may run npm run build
command to build the app.
npm run build
4.- Testing the App Locally
Once you've built the app, you may test it locally by running npm run preview
command
npm run preview
5.- Deploying your site
For More details Click
6.- Note:
To get more help on the TypeScript checkout TypeScript
To get more help on the Vite checkout Vite
7.- Further help
You can learn more in the Create Vue TypeScript Application Documentation To learn TypeScript, check out the TypeScript Documentation.
Folder Directories -
-
assets
This folder contains all the assets of ArchCode template.
-
component
This folder component files for various template features.
-
elements
This folder contains all the elements files of ArchCode template.
-
views
This folder has all pages for various template features.
-
images
This folder has all images form used in the template.
-
router
This folder has all router form used in the template.
-
css
Css file
Vue File -
-
Home.vue
Home Page 1
-
AboutUs.vue
About us
-
BlogDetails.vue
Blog details
-
BlogGrid.vue
Blog grid
-
BlogLargeLeftSidebar.vue
Blog large left sidebar
-
BlogListLeftSidebar.vue
Blog list left sidebar
-
ComingSoon.vue
Coming soon
-
ContactUs.vue
Contact us
-
Error404.vue
Error 404
-
Portfolio.vue
Portfolio
-
PortfolioDetails.vue
Portfolio details
-
Services.vue
Services
-
ServicesDetails.vue
Services details
-
Team.vue
Team
-
UnderConstruct.vue
Under construct
Credits -
-
email js
-
vue count up
-
vue lightgallery
-
swiper
-
vue router
-
vue3 toastify
Theme Features -
Color Theme
Choosing a color theme for a website is an important part of creating a visually appealing and effective design. Here are so many color option available, you can choose a color theme for your website.
<body data-color="color_1">
Layout
The layout of a website refers to the way in which content and design elements are arranged on each page of the site. A well-designed layout can help to make a website more visually appealing, easy to navigate, and engaging for users. Here two layouts are available-
<body id="bg" class="boxed">
<body id="bg" class="frame">
Header
The header of a website is the top section of the site that appears on every page. It typically includes the website logo, navigation menu, and sometimes additional elements such as a search bar, social media icons, or a call to action. Here we used fixed and sticky header in our website-
Header Fixed is-fixed
<div class="main-bar-wraper navbar-expand-lg sticky-header is-fixed">
Header Static sticky-no
<div class="main-bar-wraper navbar-expand-lg sticky-no">
Background Color
The background color of a website is an important aspect of its overall design. It sets the tone for the site and can have a significant impact on user experience. You can use body background color like this but it will work only in boxed and frame layout
<body id="bg" class="frame" style="background-color: rgb(255, 175, 41);">
Background Image
Using a background image on a website can add visual interest and personality to the design. You can use body background image like this but it will work only in boxed and frame layout
<body id="bg" class="boxed" style="background-image: url("images/switcher/background/bg1.jpg");">
<body id="bg" class="frame" style="background-image: url("images/switcher/background/bg1.jpg");">
Project Main Features -
- VueJS v3.3.10
- Vite v5.0.5
- TypeScript v5.2.0
- Node v20.10.0
- Fully Responsive
- Detailed Documentation
- Slider
- Contact Us
- Advanced Elements
- Under Maintenance
- Coming Soon Page
- Error 404
- Scroll
- Key Feature
- Blog Page
- Team Page
- Services
- Router
main.ts Structure
import { createApp } from "vue"; import App from "./App.vue"; import router from "./router"; const app = createApp(App); app.use(router); app.mount("#app");
Create a Page
<template> <div> <h1>Demo</h1> </div> <template> <script> export default { setup () { return { } } } </script> <style lang="css" scoped> </style>
Our Products -
Do You Need Help To Customization
After Purchase A Template...
You Will Start Customizing According Your Requirement
BUT What If You Don't Know
SOLUTION IS HIRE DexignZone
Hire Same Team For Quality Customization
- We Will Customize Template According To Your Requirement
- We Will Upload On Server And Make Sure Your Website is Live