fetchContentNavigation()

The fetchContentNavigation utility returns a tree of items based on the content/ directory structure and files.

Usage

Directory structure
content/
  index.md
  sub-folder
    about.md
app.vue
<script setup>
const { data: navigation } = await useAsyncData('navigation', () => fetchContentNavigation())
</script>

<template>
  <pre>{{ navigation }}</pre>
</template>
Output
[
  {
    "title": "Hello Content V2",
    "_path": "/",
    "children": [
      {
        "title": "Hello Content V2",
        "_id": "content:index.md",
        "_path": "/"
      }
    ]
  },
  {
    "title": "Sub Folder",
    "_path": "/sub-folder",
    "children": [
      {
        "title": "About Content V2",
        "_id": "content:sub-folder:about.md",
        "_path": "/sub-folder/about"
      }
    ]
  }
]
Read more in Examples > Navigation > Fetch Content Navigation.

Arguments

  • queryBuilder
    • Type: QueryBuilder
    • Definition: Any query built via queryContent()
    • Default: /
Edit this page on GitHub
Table of Contents