NuxtN
Nuxt•2y ago
tombu

404 error handling acting strangely

I'm developing my first Nuxt 3 site and I'm experiencing an issue I'm not used to from v2.

I'm trying to throw an error on a slug page after useAsyncData, either if throwAsyncData returns an error, or if the data it returns has no value.

It works great on a slug page - if I navigate to it directly or if I refresh it - but if I try to navigate to the slug-with-no-data using a <nuxt-link> from elsewhere in the app, rather than navigating to the slug page and showing the error, the address bar updates to show the slug-with-no-data url, nothing happens on the front-end and I get Uncaught (in promise) Error: Page Not Found in the console.

What can I do to easily handle the error so that it just shows the same 404 as if I visited the slug page directly?

Here's my createError

const {
    data: service,
    error
} = await useAsyncData(
…

if (error.value ||
    !service.value) {
    throw createError({
        statusCode: 404,
        statusMessage: 'Page Not Found'
    });
}


Edit: I've found the magic fatal: true option that seems to do what I want, I'm still interested to know if that's the best way though!
Was this page helpful?