1.7 KiB
<NuxtLayout>
You can use <NuxtLayout /> component to activate default layout on app.vue or error.vue.
<template>
<NuxtLayout>
some page content
</NuxtLayout>
</template>
<NuxtLayout /> can be used to override default layout on app.vue, error.vue or even page components found in the /pages directory.
name prop
<NuxtLayout /> component accepts the name prop, which you can pass to use a non-default layout, where name can be a static string, reactive reference or a computed property. It must match the name of the corresponding layout file in the /layouts directory.
Examples
<template>
<NuxtLayout :name="layout">
<NuxtPage />
</NuxtLayout>
</template>
<script setup>
// layouts/custom.vue
const layout = 'custom'
</script>
::alert{icon=👉}
Please note the layout name is normalized to kebab-case, so if your layout file is named errorLayout.vue, it will become error-layout when passed as a name property to <NuxtLayout />.
::
<template>
<NuxtLayout name="error-layout">
<NuxtPage />
</NuxtLayout>
</template>
Layout and transition
<NuxtLayout /> renders incoming content via <slot />, which is then wrapped around Vue’s <Transition /> component to activate layout transition. For this to work as expected, it is recommended that <NuxtLayout /> is not the root element of the page component.
<template>
<div>
<NuxtLayout name="custom">
<template #header> Some header template content. </template>
</NuxtLayout>
</div>
</template>
::ReadMore{link="/guide/directory-structure/layouts"} ::