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