Quick Tip: Nuxt & Storyblok Error Handling (e.g. 404)

Welcome to my new Quick Tip series:

Today we are looking at Error Handling when building websites with Nuxt and Storyblok as CMS. If you haven't tried the two tools, go check out one of the awesome tutorials. It's a perfect match for all your projects.

Today we are looking into one specific use case:

1. Build a blog post detail page with a dynamic slug in the URL param
2. Fetch the content from Storyblok CMS
3. If the content cannot be found (Storyblok returns 404), Nuxt should show an error Page
4. The solution must work with Server-Side-Rendering and Server-Side-Generation

Solution

<template>
    <YourArticleDetailPage :story="story" />
</template>

<script lang="ts" setup>

// Get the Slug from the Route
const route = useRoute()
const slug = route.params.slug

// Load the Content from /blog
const story = await useAsyncStoryblok(`blog/${slug}`)


// Handle the Error
if (!story.value) {
    throw createError({
        statusCode: 404,
        statusMessage: 'Page Not Found',
        fatal: true,
    })
}
</script>

Noteworthy:

The most important part of the solution is fatal: true in the error object. This will trigger a full-screen error page in Nuxt and redirect the user to the error page.

Now you can go ahead and create the error page with error.vue - as described here. Remember: the error.vue must be kept in root, not /pages

That's it for today's quick tip.