TypeScript Content Relationships in Nuxt

Developing with Prismic
, ,
12

Hey @leopold,

Thanks for your patience! I looked into this and I think I might have a solution for you. This is based on a solution that our engineer Angelo developed for typing fetchLinks in Next.js, but I've tested it in Nuxt and it seems to be working.

Typically we use the $prismic.isFilled helpers to check if a property exists. However — as you have encountered here — TypeScript doesn't know the structure of the linked data. Angelo wrote a helper to take care of that — isFilledRelatedData() — which you can see here:

https://community.prismic.io/t/content-relationship-types-within-another-content-relationship-in-a-slice/13866/2

I got that working like this:

  <h2
    v-if="
      $prismic.isFilled.contentRelationship(page?.data.tag) &&
      isFilledRelatedData(page?.data.tag, 'tag', 'title')
    "
  >
    {{ page?.data.tag.data.title }}
  </h2>

It seems to be working for me. Give it a try and let me know if that takes care of your type error.

Sam