Search code examples
typescriptnuxt3.jsnuxt-content

Nuxt content Type 'ParsedContent | null' is not assignable to type 'Record<string, any> | undefined'


I'm testing @nuxt/content but fail to get a working demo with a simple example.

 ERROR(vue-tsc)  Type 'ParsedContent | null' is not assignable to type 'Record<string, any> | undefined'.

/content/news/test.md

---
title: 'test'
tag: ['test']
---

# test1

content

/pages/my-page.vue

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

interface MyCustomParsedContent extends ParsedContent {
  tag: Array<string>
}

const { data:article } = await useAsyncData(() => queryContent<MyCustomParsedContent>('news')
  .where({ tag: { $in: ['patch-note'] } })
  .sort({ date: -1 })
  .findOne())


if (!article.value) {
  throw createError({
    statusCode: 404,
    statusMessage: "Page not found",
  });
}
</script>

<template>
  <div>
        <ContentRenderer :value="article" />
  </div>
</template>

Solution

  • Fixed with <ContentRenderer :value="article as any" />

    Not sure it's the cleanest solution but it's working