From 8fae8639975f574701fac71d40359386f810f9f0 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 25 Apr 2022 17:54:20 +0100
Subject: [PATCH] docs: add layout to match custom header example (#4593)

---
 .../3.directory-structure/6.layouts.md        | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/docs/content/2.guide/3.directory-structure/6.layouts.md b/docs/content/2.guide/3.directory-structure/6.layouts.md
index 563e824acf..f18810e1bc 100644
--- a/docs/content/2.guide/3.directory-structure/6.layouts.md
+++ b/docs/content/2.guide/3.directory-structure/6.layouts.md
@@ -73,7 +73,24 @@ Learn more about [defining page meta](/guide/directory-structure/pages#page-meta
 
 Even if you are using the `~/pages` integration, you can take full control by using the `<NuxtLayout>` component (which is globally available throughout your application), by setting `layout: false`.
 
-```vue
+::code-group
+
+```vue [layouts/custom.vue]
+<template>
+  <div>
+    <header>
+      <slot name="header">
+        Default header content
+      </slot>
+    </header>
+    <main>
+      <slot />
+    </main>
+  </div>
+</template>
+```
+
+```vue [pages/index.vue]
 <template>
   <NuxtLayout name="custom">
     <template #header> Some header template content. </template>
@@ -89,6 +106,8 @@ definePageMeta({
 </script>
 ```
 
+::
+
 ## Example: changing the layout
 
 You can also use a ref or computed property for your layout.