1. Content Layout: To render your pages w/ components like navigation drawer, appbar, footer, etc.
2. Blank Layout: To render pages like Login, Register, etc.

You can define layout for route in meta of that route.

Usage:

{path:'/user-view',name:'user-view',component:()=>import('@/views/user/UserView.vue'),// for `Content` layout there's no need to define layout meta},

{path:'/forgot-password',name:'forgot-password',component:()=>import('@/views/auth/ForgotPassword.vue'),meta:{layout:'blank',},},

You can update navigation drawer items by editingVerticalNavMenu.vue file located atresources/js/src/layouts/components/vertical-nav-menu/VerticalNavMenu.vue.

For creating a navigation drawer section.

<nav-menu-section-titletitle="USER INTERFACE"></nav-menu-section-title>

For creating a navigation drawer link.

You can omit to passicon prop ifNavMenuLink is a child of theNavMenuGroup component.

<nav-menu-linktitle="Dashboard":to="{ name: 'dashboard' }":icon="icons.mdiHomeOutline"></nav-menu-link>

For creating a navigation drawer group.

It providesdefault slot to renderNavMenuLink as child.

<nav-menu-grouptitle="Pages":icon="icons.mdiFileOutline"><!-- Default Slot --><nav-menu-linktitle="Login":to="{ name: 'pages-login' }"target="_blank"></nav-menu-link></nav-menu-group>

You can customize AppBar & Footer by updatingContent.vue layout file located atsrc/layouts/Content.vue

You can write your custom styles inresources/sass/styles directory. Do no removestyles.scss &variables.scss present in this directory.

If you want to override Vuetify variables you can use theresources/sass/styles/variables.scss file. If you want to write your custom styles then you can useresources/sass/styles/styles.scss

Enjoy the free template. Don't forget to check outThemeSelection & Star this repo 😇