composables
useContentHelpers()
Helpers to interact with the navigation object.
Usage
<script setup lang="ts">const { navBottomLink, navDirFromPath, navPageFromPath, navKeyFromPath} = useContentHelpers()</script>Learn more about the navigation object.
navBottomLink()
Take a navigation node and will resolve the first available path from that node.
It can be useful to build nested navigations systems.
<script setup>const { navBottomLink } = useContentHelpers()const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())const path = navBottomLink(navigation.value)</script>navDirFromPath()
This function will take a path and will resolve the first available navigation node from that path.
It can be useful to find the current directory of a navigation node.
<script setup>const route = useRoute()const { navDirFromPath } = useContentHelpers()const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())const dir = navDirFromPath(route.path, navigation.value)</script>navPageFromPath()
This function will take a path and will resolve the first available navigation page from that path.
It can be useful to find the current navigation node the page you're browsing.
<script setup>const route = useRoute()const { navPageFromPath } = useContentHelpers()const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())const page = navPageFromPath(route.path, navigation.value)</script>navKeyFromPath()
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.
<script setup>const route = useRoute()const { navKeyFromPath } = useContentHelpers()const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())const layout = navKeyFromPath(route.path, 'layout', navigation.value)</script>