TypeScript

Nuxt Content v2 is built with TypeScript in mind.


The module exposes typings properly from configuration to query builder.

Usage

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

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

Type augmentation

If you are adding keys to front-matter other than the defaults key, 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 }))</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/dist/runtime/types'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.

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