DEV Community

Cover image for Quick Tip: Nuxt & Storyblok Error Handling (e.g. 404)
Anton Reindl
Anton Reindl

Posted on

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>

Enter fullscreen mode Exit fullscreen mode

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay