setPageLayout
Динамическая смена макета страницы.
setPageLayout меняет макет страницы во время выполнения. Требует контекст Nuxt, поэтому вызывать можно только в контексте Nuxt.app/middleware/custom-layout.ts
export default defineNuxtRouteMiddleware((to) => {
setPageLayout('other')
})
Передача пропсов в макет
Второй аргумент — объект с пропсами для макета:
app/middleware/admin-layout.ts
export default defineNuxtRouteMiddleware((to) => {
setPageLayout('admin', {
sidebar: true,
title: 'Dashboard',
})
})
Макет принимает эти пропсы:
app/layouts/admin.vue
<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>
При динамической смене макета на сервере вызывайте
setPageLayout до рендера макета Vue (в плагине или route middleware), иначе возможна рассинхронизация при гидрации.