From a33bb946881a6d46cf6f093b06a258a356b75914 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Mon, 20 Jan 2025 13:50:01 +0000
Subject: [PATCH] docs: update nuxt/content example

---
 .../2.directory-structure/1.content.md        | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/docs/2.guide/2.directory-structure/1.content.md b/docs/2.guide/2.directory-structure/1.content.md
index 5800a362a0..5b028d49a1 100644
--- a/docs/2.guide/2.directory-structure/1.content.md
+++ b/docs/2.guide/2.directory-structure/1.content.md
@@ -36,14 +36,24 @@ The module automatically loads and parses them.
 
 ## Render Content
 
-To render content pages, add a [catch-all route](/docs/guide/directory-structure/pages/#catch-all-route) using the [`<ContentDoc>`](https://content.nuxt.com/components/content-doc) component:
+To render content pages, add a [catch-all route](/docs/guide/directory-structure/pages/#catch-all-route) using the [`<ContentRenderer>`](https://content.nuxt.com/docs/components/content-renderer) component:
 
 ```vue [pages/[...slug\\].vue]
+<script lang="ts" setup>
+const route = useRoute()
+const { data: page } = await useAsyncData(route.path, () => {
+  return queryCollection('content').path(route.path).first()
+})
+</script>
+
 <template>
-  <main>
-    <!-- ContentDoc returns content for `$route.path` by default or you can pass a `path` prop -->
-    <ContentDoc />
-  </main>
+  <div>
+    <header><!-- ... --></header>
+
+    <ContentRenderer v-if="page" :value="page" />
+
+    <footer><!-- ... --></footer>
+  </div>
 </template>
 ```