Add a layout

Vuero layouts are composed of set of components and composables that are used to build the structure of the application. They are designed to be flexible and easy to customize, so you can adapt them to your needs.

Name	Features
SidebarLayout	Submenu navigation with multiple levels of depth
SideblockLayout	Simple sidebar with a clear navigation
NavbarLayout	Megamenu and dropdwon navigation
NavsearchLayout	Simple navigation with complete slot customization
LandingLayout	Fullscreen landing page with a top navigation and a footer
MinimalLayout	Simple layout with no features, only a container for your content
AuthLayout	Authentication layout with no features, only a container for your content

Migrating from v2.x

In previous versions, you needed to override the layout components to customize them.

In v3.x, you can use the layout props and slots to customize the layout to your needs. You should now avoid to edit them directly, to avoid conflicts when updating the theme for future versions.

We moved the layout components to the src/components/layouts folder, the src/layouts folder is now used to store your custom layouts instead. This change allows you to easily customize the layout components without modifying the theme files and keep this system more flexible.

Setup your layout

First we will create a new layout component that we will use in our pages. We will create a new file in the src/layouts folder called my-layout.vue and use the SideblockLayout component as a base.

src/
└─ layouts/
   └─ my-layout.vue

<template>
  <SideblockLayout>
    <slot />
  </SideblockLayout>
</template>

INFO

Don't create the layout in the src/components folder, to avoid component to be autoloaded, as we will manually import it in the src/pages components.

In this file, you can use the layout props and slots to customize the layout to your needs. This part is better explained in each layout documentation, but here is a quick example of how you can customize the sidebar of the SideblockLayout:

<script setup lang="ts">
import type { SideblockItem } from '/@src/components/layouts/sideblock/sideblock.types'

const links = ref<SideblockItem[]>([
  {
    type: 'link',
    label: 'Dashboard',
    icon: 'lucide:grid',
    to: '/app',
  },
])
</script>

<template>
  <SideblockLayout
    size="large"
    :links
  >
    <slot />

    <template #logo>
      <!-- Your logo here -->
    </template>
  </SideblockLayout>
</template>

Use your layout in a page

Now that we have our layout, we can use it in our pages. The simplest way to do this is to import the layout in the page component and use it as a wrapper for your content.

INFO

Vuero use Unplugin Vue Router to manage routes generation from the src/pages folder. This means that you only need to create a new .vue file in the src/pages folder to create a new page in your application.

src/
└─ pages/
   └─ index.vue

<script setup lang="ts">
import MyLayout from '/@src/layouts/my-layout.vue'
</script>

<template>
  <MyLayout>
    <!-- Your content here -->
  </MyLayout>
</template>

Equivalent in Nuxt quickstarter

<script setup lang="ts">
definePageMeta({
  layout: 'my-layout',
})
</script>

<template>
  <div>
    <!-- Your content here -->
  </div>
</template>

We could do the same for each page of our application, but it will make component to unmount and remount each time we navigate to a new page.

Instead, we can use Nested Routes. Create a new file in the src/pages folder called app.vue and a new folder called app with an index.vue file inside.

The app.vue file will be used as a layout for the app/* routes, and the index.vue file will be used as the default page for the app/ route.

src/
└─ pages/
   ├─ app.vue
   ├─ app/
   │  └─ index.vue
   └─ index.vue

src/pages/app.vue

<script setup lang="ts">
import MyLayout from '/@src/layouts/my-layout.vue'
</script>

<template>
  <MyLayout>
    <!-- RouterView will be replaced by the content of the nested routes -->
    <RouterView />
  </MyLayout>
</template>

src/pages/app/index.vue

<template>
  <div>
    <!-- Your content here -->
  </div>
</template>

Equivalent in Nuxt quickstarter

<script setup lang="ts">
definePageMeta({
  layout: 'my-layout',
})
</script>

<template>
  <div>
    <!-- NuxtPage is used instead of RouterView -->
    <NuxtPage />
  </div>
</template>