mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-24 14:45:15 +00:00
3ec108493d
* docs: simplify docs to only markdown * Create nuxt-config.md * chore: update * chore: add readme
66 lines
1.7 KiB
Markdown
66 lines
1.7 KiB
Markdown
---
|
||
title: "<NuxtLayout>"
|
||
---
|
||
|
||
# `<NuxtLayout>`
|
||
|
||
You can use `<NuxtLayout />` component to activate `default` layout on `app.vue` or `error.vue`.
|
||
|
||
```vue [/app.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
|
||
|
||
```vue [pages/index.vue]
|
||
<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 />`.
|
||
::
|
||
|
||
```vue [/error.vue]
|
||
<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.
|
||
|
||
```vue [pages/index.vue]
|
||
<template>
|
||
<div>
|
||
<NuxtLayout name="custom">
|
||
<template #header> Some header template content. </template>
|
||
</NuxtLayout>
|
||
</div>
|
||
</template>
|
||
```
|
||
|
||
::ReadMore{link="/docs/guide/directory-structure/layouts"}
|
||
::
|