Home

Welcome

Layouts

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',
  },
},

Navigation Drawer Items

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

NavMenuSectionTitle

For creating a navigation drawer section.

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

Props

Name	Description	Type	Parameters	Default
title*	Section title	String	-	-

NavMenuLink

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>

Name	Description	Type	Parameters	Default
title*	Link title	String	-	-
icon	Icon to render on left	String	any valid v-icon icon string	undefined
*other props supported by v-list-item	-	-	-	-

NavMenuGroup

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>

Name	Description	Type	Parameters	Default
title*	Group title	String	-	-
icon*	Icon to render on left	String	any valid v-icon icon string	undefined

AppBar & Footer Customization

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

Style Customization

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 😇