Skip to content

Commit b6ff9ba

Browse files
authored
docs: update examples for content helpers composable
1 parent 1fab215 commit b6ff9ba

File tree

1 file changed

+20
-11
lines changed

1 file changed

+20
-11
lines changed

docs/content/3.composables/4.use-content-helpers.md

+20-11
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,13 @@ Take a navigation node and will resolve the first available path from that node.
2424

2525
It can be useful to build nested navigations systems.
2626

27-
```ts
28-
const { navigation } = useContent()
27+
```vue
28+
<script setup>
29+
const { navBottomLink } = useContentHelpers()
30+
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
2931
3032
const path = navBottomLink(navigation.value)
33+
</script>
3134
```
3235

3336
## `navDirFromPath()`
@@ -36,12 +39,14 @@ This function will take a path and will resolve the first available navigation n
3639

3740
It can be useful to find the current directory of a navigation node.
3841

39-
```ts
42+
```vue
43+
<script setup>
4044
const route = useRoute()
41-
42-
const { navigation } = useContent()
45+
const { navDirFromPath } = useContentHelpers()
46+
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
4347
4448
const dir = navDirFromPath(route.path, navigation.value)
49+
</script>
4550
```
4651

4752
## `navPageFromPath()`
@@ -50,12 +55,14 @@ This function will take a path and will resolve the first available navigation p
5055

5156
It can be useful to find the current navigation node the page you're browsing.
5257

53-
```ts
58+
```vue
59+
<script setup>
5460
const route = useRoute()
55-
56-
const { navigation } = useContent()
61+
const { navPageFromPath } = useContentHelpers()
62+
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
5763
5864
const page = navPageFromPath(route.path, navigation.value)
65+
</script>
5966
```
6067

6168
## `navKeyFromPath()`
@@ -64,10 +71,12 @@ This function will take a path and will resolve a specific key from that path.
6471

6572
It can be useful when you want to add a fallback on the `_dir.yml` value of a key in a page.
6673

67-
```ts
74+
```vue
75+
<script setup>
6876
const route = useRoute()
69-
70-
const { navigation } = useContent()
77+
const { navKeyFromPath } = useContentHelpers()
78+
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
7179
7280
const layout = navKeyFromPath(route.path, 'layout', navigation.value)
81+
</script>
7382
```

0 commit comments

Comments
 (0)