# TypeScript Content Relationships in Nuxt

**URL:** <https://community.prismic.io/t/typescript-content-relationships-in-nuxt/14700>\
**Category:** Developing with Prismic\
**Tags:** typescript, vuejs, nuxtjs\
**Created:** [December 8, 2023, 2:16pm UTC](https://community.prismic.io/t/typescript-content-relationships-in-nuxt/14700 "2023-12-08T14:16:10Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![leopold](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/leopold/32/6141_2.png) [@leopold](https://community.prismic.io/u/leopold)\
**Post date:** [December 8, 2023, 2:16pm UTC](https://community.prismic.io/t/typescript-content-relationships-in-nuxt/14700/1 "2023-12-08T14:16:10Z")

</div>

There are some threads about similar issues, but I still wanted to post.

The following template code (Vue/Nuxt) gives me the error below. Could I use some helper function in the template code to fix this? isFilled? Thanks in advance.

```auto
              <ComponentLegalClause
                v-else-if="slice.slice_type === 'legal_clause' && slice.primary.clause"
                :structured-text-field="slice.primary.clause.data.text"
              />

```

```auto
Property 'data' does not exist on type 'ContentRelationshipField<"legal_clause">'.
  Property 'data' does not exist on type 'EmptyLinkField<"Document">'.

```

---

<div class="post-metadata">

**Author:** ![Levi](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levi/32/24_2.png) [@Levi](https://community.prismic.io/u/Levi)\
**Post date:** [December 13, 2023, 11:42am UTC](https://community.prismic.io/t/typescript-content-relationships-in-nuxt/14700/5 "2023-12-13T11:42:16Z")

</div>

Hi @leopold. I think you might be right that this could be fixed with something like `isFilled`. Did you give that a try? Did it work for you?

---

<div class="post-metadata">

**Author:** ![leopold](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/leopold/32/6141_2.png) [@leopold](https://community.prismic.io/u/leopold)\
**Post date:** [December 19, 2023, 11:43am UTC](https://community.prismic.io/t/typescript-content-relationships-in-nuxt/14700/7 "2023-12-19T11:43:24Z")

</div>

Yes, I've played around with using isFilled.

```auto
<ComponentLegalClause
  v-else-if="
    slice.slice_type === 'legal_clause' &&
    isFilled.contentRelationship(slice.primary.clause)
  "
  :structured-text-field="slice.primary.clause.data.text"
  class="standard-article__slice-legal-clause"
/>

```

`'slice.primary.clause.data' is of type 'unknown'.`

I could add some type assertion, but I am not sure that's the best way to go about it.

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [December 27, 2023, 11:59am UTC](https://community.prismic.io/t/typescript-content-relationships-in-nuxt/14700/8 "2023-12-27T11:59:35Z")

</div>

Hey Leopold,

It looks like you're using `fetchLinks`, `graphQuery`, or `GraphQL`? If so, you'll need to type the content relationship manually. Let me know if you need help with that and I can ask our resident Nuxt expert (though I think she's away on vacation currently).

Sam

---

<div class="post-metadata">

**Author:** ![leopold](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/leopold/32/6141_2.png) [@leopold](https://community.prismic.io/u/leopold)\
**Post date:** [December 27, 2023, 1:48pm UTC](https://community.prismic.io/t/typescript-content-relationships-in-nuxt/14700/9 "2023-12-27T13:48:02Z")

</div>

Thanks. Yes, I am using `fetchLinks` in my query. Not using `graphQuery`, or `GraphQL`.

I would love to have some more information on how to type the content relationship manually. It should be done in the content query itself, right?

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [December 28, 2023, 10:57am UTC](https://community.prismic.io/t/typescript-content-relationships-in-nuxt/14700/10 "2023-12-28T10:57:08Z")

</div>

Okay, I'll look into this and get back to you next week.

---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [January 9, 2024, 10:26am UTC](https://community.prismic.io/t/typescript-content-relationships-in-nuxt/14700/12 "2024-01-09T10:26:13Z")

</div>

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](https://community.prismic.io/t/content-relationship-types-within-another-content-relationship-in-a-slice/13866/2)

I got that working like this:

```html
  <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