mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-26 07:32:01 +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>
|
</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
|
## 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.
|
`<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