From 871404ae5673425aeedde82f123ea58aa7c6facf Mon Sep 17 00:00:00 2001
From: xjccc <546534045@qq.com>
Date: Fri, 29 Mar 2024 02:06:16 +0800
Subject: [PATCH] docs: add contents of the layout in examples (#26532)

---
 docs/3.api/1.components/3.nuxt-layout.md | 42 ++++++++++++++++++++++--
 1 file changed, 39 insertions(+), 3 deletions(-)

diff --git a/docs/3.api/1.components/3.nuxt-layout.md b/docs/3.api/1.components/3.nuxt-layout.md
index 3b5a462a00..1ff8168ade 100644
--- a/docs/3.api/1.components/3.nuxt-layout.md
+++ b/docs/3.api/1.components/3.nuxt-layout.md
@@ -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"}