TypeScript Support

Nuxt Content v2 is built with TypeScript in mind.

Typings properly

The module exposes typings properly from configuration to query builder.


When using queryContent(), you will retrieve a QueryBuilder instance.

Once you use one of the fetching methods (find(), findOne(), findSurround()), you will retrieve an object of type ParsedContent.

Type augmentation

If you are adding keys to the front-matter other than the default keys, you might want to have typings over these.

This is currently possible, yet not in an optimal way.

The recommended way to do it is by using this method:

<script setup lang="ts">
import type { ParsedContent } from '@nuxt/content/dist/runtime/types'

interface MyCustomParsedContent extends ParsedContent {
  yourOwn: 'keys'
  foo: 'bar'
  baz: 'bar'

// That `data` key will be typed with `MyCustomParsedContent`
const { data } = await useAsyncData(
  () => queryContent<MyCustomParsedContent>({ ...anyQuery })

Markdown Specific Types

If you know the content being fetched will be Markdown, then you can extend the MarkdownParsedContent type for improved type-safety.

<script setup lang="ts">
import type { MarkdownParsedContent } from '@nuxt/content/dist/runtime/types'

interface Article extends MarkdownParsedContent {
  author: string
const { data } = await useAsyncData(
  () => queryContent<Article>('articles').findOne()
// will be typed as well as markdown specific entries

The future

TypeScript support is a strong focus for us.

We want to provide fully generated type for each content in your project, that would allow the same as type augmentation.

This is not yet implemented but will be part of the roadmap in upcoming months.

You can track #1057 if you want to know more about roadmap for TypeScript support of front-matter keys.