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 😇