docs: accessing custom props for NuxtLayout (#22989)

This commit is contained in:
Kekeocha Justin Chetachukwu 2023-09-05 11:09:23 +01:00 committed by GitHub
parent 1a08079710
commit fe59e0d739
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -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 Vues `<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 Vues `<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.