Top
Go to app.vue file and comment or remove Loader section
Remove design of loader from src >> App.vue between comment of Loader starts to Loader ends
<div class="loader-wrapper" v-if='showLoader'>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"> </div>
<div class="dot"></div>
</div>
export default {
data(){
return{
showLoader:false
}
},
watch:{
$route(){
this.showLoader = true;
setTimeout(() => {
this.showLoader = false
}, 2000);
}
}
}
Routing is one of the most important aspects of VueJs, without it you cannot render any of you pages. When you install vue, it asks you if you want to include the router so that you do not have to build it from scratch. We recommend choosing the routing option while creating a vue project.
You can find router file on the following path:
theme >> src >> router >> index.js
import { createRouter, createWebHistory } from 'vue-router'
import indexDefault from "@/pages/dashboards/indexDefault.vue"
import indexEcommerce from "@/pages/dashboards/indexEcommerce.vue"
const routes = [
{
path:"/",
component:BodyView,
children: [
{
path: '',
name: 'defaultRoot',
component: indexDefault,
}
]
},
{
path:"/dashboards",
component:BodyView,
children:[
{
path:"default",
name:"default",
component:indexDefault
},
{
path:"e-commerce",
name:"e-commerce",
component:indexEcommerce
}
]
},
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes,
linkExactActiveClass: 'active',
})
export default router
There are Numerous links in sidebar and if we write whole code in html then number of lines will increase a lot. So to prevent that we have created a JSON file for the sidebar links so that we can loop through the array links and render our links accordingly.
You can find menu.json on the following path: theme>src>data>menu.json
{
"data": [
{
"headTitle1": "General",
"headTitle2": "Dashboards,Widgets & Layout.",
"type": "headtitle"
},
{
"title": "Dashboards",
"icon": "home",
"type": "sub",
"badgeType": "light-primary",
"active": false,
"children": [
{
"path": "/dashboards/default",
"title": "Default",
"type": "link"
},
{
"path": "/dashboards/e-commerce",
"title": "Ecommerce",
"type": "link"
}
]
},
{
"title": "Widgets",
"icon": "airplay",
"type": "sub",
"active": false,
"children": [
{
"path": "/widgets/general",
"title": "General",
"type": "link"
},
{
"path": "/widgets/Chart",
"title": "Charts",
"type": "link"
}
]
},
]
}
Suppose you want to customize color and font as per your project then you can change it by:
Suppose you want to change color and size of card-body, Alert, Badge, Form input, breadcrumb,buttons, footer, sidebar and many more then you just need to change that particular color from _variable.scss in assets >> scss >> utils >> _variables.scss
You can change font of your theme from index.html in public folder
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
To make this theme according to your preferences we have provided a customizer bar, where you can tweak colors and layout type of the page, primary and secondary colors of the theme, and the layout of the sidebar. We have also provided a configure button from where you can copy the settings and paste in the layout.json file and get the customised layout by as the default layout.
You can find Theme customizer on the right side of every page
You can change your theme by clicking particular setting
Then you just need to click on configuration button
Configuration popup will be open then just click on copy json button which will copy configuration of theme which you want
Now go to our theme >> src >> data >> config.json
{
"settings":
{
"layout_type":"ltr",
"layout":"default",
"sidebar_setting":"default-sidebar"
},
"color":
{
"layout_version":"light",
"primary_color": "#5c61f2",
"secondary_color": "#eeb82f"
}
}
As we have given amazing layouts by adding them in URL so you just need to add your choice name layout in URL and you have that with you
Please refer the below table for corresponding classes. it is just for your inforamation you do not need to bother about this it's dynamically take particular classes according to your needs.
Layout | Options |
---|---|
Boxed Layout | Class: box-layout |
RTL Layout | Class: rtl |
Light Layout | Class: light |
Dark Sidebar | Class: dark-sidebar |
Dark Layout | Class: dark-only |
We have some inbuilt themes for sidebar that can be switched with just a class change
Sidebar | Options |
---|---|
Horizontal Sidebar type | Class: "page-wrapper horizontal-wrapper" and "page-body-wrapper horizontal-menu" |
Compact Sidebar | Attribute: sidebar-layout="compact-sidebar" |
Suppose you want to add RTL in your application then you just need to set "layout_type" as RTL so application will be converted in RTL layout.
Suppose you want to change Colors from layout.json then you have to first clear localStorage then you will get your color in theme.
{
"settings":
{
"layout_type":"rtl",
"layout":"default",
"sidebar_setting":"default-sidebar"
},
"color":
{
"layout_version":"light",
"primary_color": "#5c61f2",
"secondary_color": "#eeb82f"
}
}