Layouts

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

We use vite-plugin-vue-layouts-next 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. Blank layout

When a new page is created, the Blank layout is automatically applied. It provides a minimal structure without additional components or styling. The Blank layout is extremely straightforward — it consists of a simple div wrapper that allows adding layout classes and includes 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:

<route lang="yaml">
meta:
  unauthenticatedOnly: true
</route>

2. Default layout

File path: @/layouts/default.vue

It is built on top of components provided by the layouts plugin to offer a complete page structure.

This layout is typically used for dashboard pages and other admin-related sections that share a common structure such as navigation bar, sidebar, footer & customizer.

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

<route lang="yaml">
meta:
  layout: default
  unauthenticatedOnly: false
</route>

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

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:

<route lang="yaml">
meta:
  layout: component
  unauthenticatedOnly: true
</route>