Typings properly

The module exposes typings properly from configuration to query builder.

Usage

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'

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 })
)
</script>

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'

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

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.