2.querying.md

title	description
Querying	Any component or page of your application can fetch content from the content/ directory. The queryContent() function is auto-imported by Nuxt Content to build queries with a MongoDB-like syntax.

Querying Content

Any component or page of your application can fetch content from the content/ directory. The queryContent(){lang="ts"} function is auto-imported by Nuxt Content to build queries with a MongoDB-like syntax.

Usage

Create a query builder

Create a new query builder with queryContent(){lang="ts"}.

You can give a path as a parameter, starting at the root of your content/ directory.

queryContent('/')

Resolve the query

Resolve the query with one of these methods:

• find(){lang="ts"} will always return an array of one or more items corresponding to documents in the content/ directory.

/* returns every document found at the root (/) path of the content/ directory */
queryContent('/').find()

• findOne(){lang="ts"} will return an object corresponding to the matching document.

/* returns only the matching index.md found at the root (/) path of the content/ directory */
queryContent('/').findOne()

With useAsyncData

Wrap your query in the useAsyncData composable (auto-imported as well).

const { data } = await useAsyncData('home', () => queryContent('/').findOne())

::code-group

<script setup>
const { data } = await useAsyncData('home', () => queryContent('/').findOne())
</script>

<template>
<main>
  <pre>
    {{ data }}
  </pre>
</main>
</template>

  # Hello Content v2!

  Content V2 is a Git-based CMS

::code-block{label="Preview" preview}

{
"_path":"/",
"_draft":false,
"_partial":false,
"_empty":false,
"title":"Hello Content V2!",
"description":"",
"body":{
"type":"root",
"children":[
{
"type":"element",
"tag":"h1",
"props":{
"id":"hello-content-v2"
},
"children":[
{
"type":"text",
"value":"Hello Content V2!"
}
]
}
],
"toc":{
"title":"",
"searchDepth":2,
"depth":2,
"links":[]
}
},
"_type":"markdown",
"_id":"content:index.md",
"_source":"content",
"_file":"index.md",
"_extension":"md"
}

:: ::

Query builder

queryContent(){lang="ts"} supports methods chaining to create advanced queries.

Once your query is ready, make sure to end your call with .find(){lang="ts"}, .findOne(){lang="ts"} or .findSurround(){lang="ts"} to effectively trigger data fetching.

::alert{type=info} Discover every query methods in the API reference ::

Example

This example uses the where(){lang="ts"} and only(){lang="ts"} methods to fetch the title of the document corresponding to the current browser URL.

<script setup>
const { path } = useRoute()

const { data } = await useAsyncData(`content-${path}`, () => {
  return queryContent().where({ _path: path }).only(['title']).findOne()
})
</script>

<template>
  <main>
    <h1>{{ data.title }}</h1>
  </main>
</template>

API routes

Nuxt Content creates a REST GET endpoint for each document in the content/ directory.

The API root path /api/_content/query accepts query parameters such as:

• /api/_content/query?only=title
• /api/_content/query?sort=size:1
• /api/_content/query?without=body

Example

::code-group

# Hello Content v2!

/api/_content/query?path=/hello

[
  {
    "_path": "/hello",
    "_draft": false,
    "_partial": false,
    "_empty": false,
    "title": "Hello!",
    "description": "",
    "body": {
      "type": "root",
      "children": [
        {
          "type": "element",
          "tag": "h1",
          "props": {
            "id": "hello!"
          },
          "children": [
            {
              "type": "text",
              "value": "Hello!"
            }
          ]
        }
      ],
      "toc": {
        "title": "",
        "searchDepth": 2,
        "depth": 2,
        "links": []
      }
    },
    "_type": "markdown",
    "_id": "content:hello.md",
    "_source": "content",
    "_file": "hello.md",
    "_extension": "md"
  }
]

::