From b6ff9ba267eb60952c2babef9b1b19eb24c4658e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Chopin?= <seb@nuxtlabs.com>
Date: Sun, 15 Oct 2023 06:47:29 -0700
Subject: [PATCH] docs: update examples for content helpers composable

---
 .../3.composables/4.use-content-helpers.md    | 31 ++++++++++++-------
 1 file changed, 20 insertions(+), 11 deletions(-)

diff --git a/docs/content/3.composables/4.use-content-helpers.md b/docs/content/3.composables/4.use-content-helpers.md
index 353d913d8..427f1d3f1 100644
--- a/docs/content/3.composables/4.use-content-helpers.md
+++ b/docs/content/3.composables/4.use-content-helpers.md
@@ -24,10 +24,13 @@ Take a navigation node and will resolve the first available path from that node.
 
 It can be useful to build nested navigations systems.
 
-```ts
-const { navigation } = useContent()
+```vue
+<script setup>
+const { navBottomLink } = useContentHelpers()
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 
 const path = navBottomLink(navigation.value)
+</script>
 ```
 
 ## `navDirFromPath()`
@@ -36,12 +39,14 @@ This function will take a path and will resolve the first available navigation n
 
 It can be useful to find the current directory of a navigation node.
 
-```ts
+```vue
+<script setup>
 const route = useRoute()
-
-const { navigation } = useContent()
+const { navDirFromPath } = useContentHelpers()
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 
 const dir = navDirFromPath(route.path, navigation.value)
+</script>
 ```
 
 ## `navPageFromPath()`
@@ -50,12 +55,14 @@ This function will take a path and will resolve the first available navigation p
 
 It can be useful to find the current navigation node the page you're browsing.
 
-```ts
+```vue
+<script setup>
 const route = useRoute()
-
-const { navigation } = useContent()
+const { navPageFromPath } = useContentHelpers()
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 
 const page = navPageFromPath(route.path, navigation.value)
+</script>
 ```
 
 ## `navKeyFromPath()`
@@ -64,10 +71,12 @@ This function will take a path and will resolve a specific key from that path.
 
 It can be useful when you want to add a fallback on the `_dir.yml` value of a key in a page.
 
-```ts
+```vue
+<script setup>
 const route = useRoute()
-
-const { navigation } = useContent()
+const { navKeyFromPath } = useContentHelpers()
+const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
 
 const layout = navKeyFromPath(route.path, 'layout', navigation.value)
+</script>
 ```