Nuxt Content v2 is built with TypeScript in mind.
The module exposes typings properly from configuration to query builder.
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
.
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>
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>
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.