> For the complete documentation index, see [llms.txt](https://phoenixcoded.gitbook.io/able-pro/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://phoenixcoded.gitbook.io/able-pro/vue-laravel/layouts.md).

# 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>
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://phoenixcoded.gitbook.io/able-pro/vue-laravel/layouts.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.