mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 13:45:18 +00:00
docs: accessing custom props for NuxtLayout
(#22989)
This commit is contained in:
parent
1a08079710
commit
fe59e0d739
@ -47,6 +47,26 @@ Please note the layout name is normalized to kebab-case, so if your layout file
|
||||
</template>
|
||||
```
|
||||
|
||||
## Passing Additional Props
|
||||
|
||||
`NuxtLayout` also accepts any additional props that you may need to pass to the layout. These custom props are then made accessible as attributes.
|
||||
|
||||
```vue[pages/some-page.vue]
|
||||
<div>
|
||||
<NuxtLayout name="custom" title="I am a custom layout">
|
||||
</NuxtLayout>
|
||||
</div>
|
||||
```
|
||||
|
||||
In the above example, the value of `title` will be available using `$attrs.title` in the template or `useAttrs().title` in `<script setup>` at custom.vue.
|
||||
|
||||
```vue[layouts/custom.vue]
|
||||
<script setup lang="ts">
|
||||
const layoutCustomProps = useAttrs()
|
||||
console.log(layoutCustomProps.title) // I am a custom layout
|
||||
</script>
|
||||
```
|
||||
|
||||
## 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.
|
||||
|
Loading…
Reference in New Issue
Block a user