layouts (макеты)
Nuxt предоставляет систему лейаутов для вынесения общей разметки в переиспользуемые шаблоны.
Компоненты из этой директории при использовании подгружаются асинхронно для лучшей производительности.
Включение лейаутов
Лейауты включаются добавлением <NuxtLayout> в app.vue:
app/app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
Чтобы задать лейаут:
- Укажите свойство
layoutна странице через definePageMeta. - Задайте проп
nameу<NuxtLayout>. - Либо свойство
appLayoutв route rules.
Имя лейаута приводится к kebab-case:
someLayout → some-layout.Если лейаут не указан, используется
app/layouts/default.vue.Если в приложении один лейаут, лучше обойтись без директории layouts и задать разметку в
app.vue.В отличие от остальных компонентов, у лейаутов должен быть один корневой элемент (и не
<slot />), чтобы Nuxt мог применять переходы при смене лейаута.Лейаут по умолчанию
Добавьте ~/layouts/default.vue:
app/layouts/default.vue
<template>
<div>
<p>Общая разметка для всех страниц</p>
<slot />
</div>
</template>
Содержимое страницы выводится в компоненте <slot />.
Именованный лейаут
Структура каталогов
-| layouts/
---| default.vue
---| custom.vue
Использование лейаута custom на странице:
pages/about.vue
<script setup lang="ts">
declare module 'nuxt/app' {
interface NuxtLayouts {
'custom': unknown
}
}
// ---cut---
definePageMeta({
layout: 'custom',
})
</script>
Лейаут по умолчанию для всех страниц можно переопределить пропом name у <NuxtLayout>:
app/app.vue
<script setup lang="ts">
// Например, в зависимости от API или статуса авторизации
const layout = 'custom'
</script>
<template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
Для лейаутов во вложенных папках имя строится из пути и имени файла, повторяющиеся сегменты убираются.
| Файл | Имя лейаута |
|---|---|
~/layouts/desktop/default.vue | desktop-default |
~/layouts/desktop-base/base.vue | desktop-base |
~/layouts/desktop/index.vue | desktop |
Рекомендуется, чтобы имя файла совпадало с именем лейаута:
| Файл | Имя лейаута |
|---|---|
~/layouts/desktop/DesktopDefault.vue | desktop-default |
~/layouts/desktop-base/DesktopBase.vue | desktop-base |
~/layouts/desktop/Desktop.vue | desktop |
Прочитайте и отредактируйте живой пример в Docs > 4 X > Examples > Features > Layouts.
Смена лейаута во время работы
Используйте хелпер setPageLayout:
app/pages/index.vue
<script setup lang="ts">
declare module 'nuxt/app' {
interface NuxtLayouts {
'custom': unknown
}
}
// ---cut---
function enableCustomLayout () {
setPageLayout('custom')
}
definePageMeta({
layout: false,
})
</script>
<template>
<div>
<button @click="enableCustomLayout">
Сменить лейаут
</button>
</div>
</template>
Лейаут для конкретных маршрутов можно задать через свойство appLayout в route rules:
nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
// Лейаут для маршрута
'/admin': { appLayout: 'admin' },
// Лейаут для нескольких маршрутов
'/dashboard/**': { appLayout: 'dashboard' },
// Отключить лейаут для маршрута
'/landing': { appLayout: false },
},
})
Удобно, когда лейауты задаются в конфиге, а не в каждом файле страницы, или когда нужно применить лейаут к маршрутам без страниц (например, catch-all).
Прочитайте и отредактируйте живой пример в Docs > 4 X > Examples > Features > Layouts.
Передача пропсов в лейауты +4.4
Передавать пропсы в лейауты можно несколькими способами.
Через definePageMeta
Используйте объектный синтаксис свойства layout, чтобы передать пропсы прямо со страницы:
<script setup lang="ts">
definePageMeta({
layout: {
name: 'panel',
props: {
sidebar: true,
title: 'Dashboard',
},
},
})
</script>
<script setup lang="ts">
const props = defineProps<{
sidebar?: boolean
title?: string
}>()
</script>
<template>
<div>
<aside v-if="sidebar">
Боковая панель
</aside>
<main>
<h1>{{ title }}</h1>
<slot />
</main>
</div>
</template>
Пропсы полностью типизированы на основе
defineProps вашего лейаута. В редакторе будут автодополнение и проверка типов.Через setPageLayout
Пропсы можно передать и при смене лейаута через setPageLayout:
setPageLayout('panel', { sidebar: true, title: 'Dashboard' })
Переопределение лейаута на странице
При использовании страниц можно отключить лейаут через layout: false и использовать <NuxtLayout> прямо на странице.
<script setup lang="ts">
definePageMeta({
layout: false,
})
</script>
<template>
<div>
<NuxtLayout name="custom">
<template #header>
Содержимое шапки.
</template>
Остальное содержимое страницы
</NuxtLayout>
</div>
</template>
<template>
<div>
<header>
<slot name="header">
Содержимое шапки по умолчанию
</slot>
</header>
<main>
<slot />
</main>
</div>
</template>
Если
<NuxtLayout> используется внутри страницы, он не должен быть корневым элементом (или отключите переходы для лейаута/страницы).