Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: accessing custom props for NuxtLayout #22989

Merged
merged 8 commits into from
Sep 5, 2023
20 changes: 20 additions & 0 deletions docs/3.api/2.components/3.nuxt-layout.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down