mirror of
https://github.com/nuxt/nuxt.git
synced 2024-11-22 05:35:13 +00:00
docs: add contents of the layout in examples (#26532)
This commit is contained in:
parent
290dc27225
commit
871404ae56
@ -87,6 +87,8 @@ console.log(layoutCustomProps.title) // I am a custom layout
|
||||
|
||||
`<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.
|
||||
|
||||
::code-group
|
||||
|
||||
```vue [pages/index.vue]
|
||||
<template>
|
||||
<div>
|
||||
@ -97,13 +99,27 @@ console.log(layoutCustomProps.title) // I am a custom layout
|
||||
</template>
|
||||
```
|
||||
|
||||
```vue [layouts/custom.vue]
|
||||
<template>
|
||||
<div>
|
||||
<!-- named slot -->
|
||||
<slot name="header" />
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
:read-more{to="/docs/getting-started/transitions"}
|
||||
|
||||
## Layout's Ref
|
||||
|
||||
To get the ref of a layout component, access it through `ref.value.layoutRef`.
|
||||
|
||||
````vue [app.vue]
|
||||
::code-group
|
||||
|
||||
```vue [app.vue]
|
||||
<script setup lang="ts">
|
||||
const layout = ref()
|
||||
|
||||
@ -113,8 +129,28 @@ function logFoo () {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<NuxtLayout ref="layout" />
|
||||
<NuxtLayout ref="layout">
|
||||
default layout
|
||||
</NuxtLayout>
|
||||
</template>
|
||||
````
|
||||
```
|
||||
|
||||
```vue [layouts/default.vue]
|
||||
<script setup lang="ts">
|
||||
const foo = () => console.log('foo')
|
||||
defineExpose({
|
||||
foo
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
default layout
|
||||
<slot />
|
||||
</div>
|
||||
</template>
|
||||
```
|
||||
|
||||
::
|
||||
|
||||
:read-more{to="/docs/guide/directory-structure/layouts"}
|
||||
|
Loading…
Reference in New Issue
Block a user