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 editing VerticalNavMenu.vue file located at resources/js/src/layouts/components/vertical-nav-menu/VerticalNavMenu.vue.

For creating a navigation drawer section.

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

For creating a navigation drawer link.

You can omit to pass icon prop if NavMenuLink is a child of the NavMenuGroup component.

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

For creating a navigation drawer group.

It provides default slot to render NavMenuLink as child.

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

You can customize AppBar & Footer by updating Content.vue layout file located at src/layouts/Content.vue

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

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

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