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: /
Table of Contents