How to use Nuxt Content with Composition API and TypeScript

Hello, I would like to use Nuxt/Content into my project with the Nuxt-composition-api module and Typescript. I have test many methods to get a content from my directory.

Here is some examples :

setup() {
    const {$content} = useContext()
    const info = useAsync( () => {
      $content('infos').fetch<InfoData>()
    })

    return {
      info
    }
  }

---

const info = await $content('infos').fetch<InfoData>()

Here is my InfoData object :

interface InfoData {
  age: number
  hiring_status: string,
  hiring_color: string
}

I have errors like "TypeError: Cannot read property 'value' of undefined" or "TypeError: Cannot read property 'age' of undefined"

My infos.json file is :

{
  "age": 18,
  "hiring": {
    "status": "available",
    "color": "green"
  }
}

Do you have an example to use the Nuxt content module with the composition api ?

[danielroe]

@ArthurDanjou I’ve not tested this, but try:

setup() {
    const { $content } = useContext()
    const info = useAsync(() => {
      return $content('infos').fetch<InfoData>()
    })

    return {
      // note that info starts out `null` and only gets filled when
      // the async fetch resolves - so check it exists (v-if) before
      // accessing it in your template 
      info
    }
  }

[danielroe]

@ArthurDanjou refs are unwrapped in the template (so there is no .value). You can find out more in the Vue 3 docs though note that there are some differences with Vue 2. You should make your condition v-if="info && info.age".