Nuxt3 Typescript MediaField no kind and url property

Developing with Prismic
1

hey there,
another typescript question
I have a link to media field, because you could add a video or an image
so, in the code I have to check what type of media it is, and I wanted to do that with v-if="slice.primary.media.kind === 'document'" for video otherwise image
but, I get an error Property 'kind' does not exist on type 'LinkToMediaField'. Property 'kind' does not exist on type 'EmptyLinkField<"Media">'
same thing with url
works if I use it like (slice.primary.media as prismic.FilledLinkToMediaField).kind but not sure this is the way to go ...

3

Hey @jankohlbach,

I'm not certain, but I think the problem is that slice.primary.media.kind will not exist if the field is unfilled. If that's the case, you're on the right track by using FilledLinkToMediaField. You might have better luck by using prismic.isFilled.link(field). Something like:

v-if="
  prismic.isFilled.link(slice.primary.media) 
  && slice.primary.media.kind === 'document'
"

Let me know if that helps.

Sam

2 Likes
5

Hey @samlittlefair

yeah, using:

import { isFilled } from '@prismicio/client'

v-if="isFilled.linkToMedia(slice.primary.media) && slice.primary.media.kind === 'document'"

did it for me, thanks a lot, that feels cleaner :slight_smile:

2 Likes
6

Using isFilled worked for me too to bypass the URL problem.

1 Like
7

Great! I'm glad it worked.

1 Like