# Layouts

We use [vite-plugin-vue-layouts-next](https://github.com/loicduong/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.

{% hint style="info" %}
**Tips:**

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

<pre class="language-typescript"><code class="lang-typescript">// env.d.ts
import 'vue-router'
declare module 'vue-router' {
  interface RouteMeta {
<strong>    layout?: 'blank' | 'default' | 'component' // Set new layout here
</strong>    unauthenticatedOnly?: boolean
    public?: boolean
  }
}
</code></pre>

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:

```tsx
<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:

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

Default layout have two variations:

* **Vertical nav layout**

&#x20;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**

&#x20;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:

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