Why can't I access Prismic useAsyncData in a Nuxt 3 script setup tag for an if-statement?

Developing with Prismic
1

I'm using the Prismic API to get some data that I want to show in my Nuxt3 template.
Everything works fine, I just want to show a 404 page when there is no data instead of a 500 error. I have added a check if the data is empty:

<script setup>
    const route = useRoute()
    const name = route.params.werke;
    const { client } = usePrismic()
    const { data: werk } = await useAsyncData('werk', () => client.getByUID("werk", name))
    if (!werk.uid) {
     throw createError({ statusCode: 404, statusMessage: 'Page Not Found' })
    }

</script>

The problem is, that at the if (!werk.uid) part werk.uid is ALWAYS empty. So I always get that 404 error. In my template werk.uid is not empty so I assume there is a problem, where the if statement can't access the const variable with useAsyncData?

Any ideas? The official Docs recommend it in a similar way to me: Error handling · Nuxt

Thanks a lot!

2

Hi Tom,

You'll need to use .value after werk so if (!werk.value) {... instead of werk.uid. This is a Vue3 thing.

3

Hey Jake,

thanks a lot, that worked well!

1 Like