Whenever I click on <NuxtLink :to="/missing">Go to missing pages</NuxtLink>, I notice nothing happens.
If I refresh the page to trigger server side render, I get the 404 error page.
I check the developer console, I see Uncaught (in promise) Error: Not Found at createError. I have a catch all page pages/[slug].vue which throw createError whenever the page data is not found.
Creating ~error.vue doesn't help.
After checking createError documentation I found the following.
If you throw an error created with createError:
- on server-side, it will trigger a full-screen error page which you can clear with clearError.
- on client-side, it will throw a non-fatal error for you to handle. If you need to trigger a full-screen error page, then you can do this by setting fatal: true.So I need to add fatal: true to trigger error page on client side (NuxtLink click to navigate).
<script setup>const { path } = useRoute();const { data, error } = await useAsyncData(`content-${path}`, () => { return queryContent().where({ _path: path }).findOne();});if (error.value) { throw createError({ statusCode: 404, statusMessage: 'Not Found', fatal: true })}</script><template> <main> <ContentRenderer v-if="data" :value="data" class="article" /> </main></template>