Layouts

The layout system of our template offers developers a high level of flexibility.

We use vite-plugin-vue-layouts plugin to create layouts. With this, all your layouts should be created in @/layouts folder.

There are three variations of layouts included in the template.

Tips:

If you create a new layout, please remember to include its types in the env.d.ts file to receive better type suggestions.

// env.d.ts
import 'vue-router'
declare module 'vue-router' {
  interface RouteMeta {
    layout?: 'blank' | 'default' | 'component' // Set new layout here
    unauthenticatedOnly?: boolean
    public?: boolean
  }
}

Add your new layout file in resources/ts/layouts/ folder

1. Default layout

File path: @/layouts/default.vue

When a new page is created, this layout is automatically applied. It is built on top of components that are offered by the layouts plugin.

Default layout have two variations:

• Vertical nav layout

If you want to customize it then open resources/ts/layouts/components/VerticalSidebar.vue then change it as per your requirement.

If you want to change nav items and icons then open resources/ts/@layouts/components/vertical-sidebar/sidebarItem.ts

• Horizontal nav layout

If you want to customize it then open resources/ts/layouts/components/HorizontalSidebar.vue then change it as per your requirement.

If you want to change nav items and icons then open resources/ts/@layouts/components/horizontal-sidebar/horizontalItems.ts

2. Blank layout

The blank layout is extremely straightforward. It consists of a div wrapper that allows for the addition of layout classes, as well as a default slot for rendering content.

This is useful for 404 error, login, register etc..which is not required any layout.

For this layout, you need define it's type in your page like following code:

definePage({
  meta: {
    layout: 'blank',
    unauthenticatedOnly: true,
  },
})

3. Component layout

This component layout creates for some ui elements to show in different way.this is useful for some basic elements pages like buttons, inputs, switch and progressbar etc....

For this layout, you need define it's type in your page like following code:

definePage({
  meta: {
    layout: 'component',
    unauthenticatedOnly: true,
  },
})