Dynamic Routing in Nuxt

Set up a catch-all route in the Nuxt project to render new stories dynamically.

Fetch and render a story dynamically

Create a app/pages/[…slug].vue file to fetch all stories in the space.

<script setup>
const slug = useRoute().params.slug;

const { story } = await useAsyncStoryblok(slug && slug.length > 0 ? slug.join("/") : "home", {
  api: {
    version: "draft",
  },
});
</script>

<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>

Get the slug from the current route, making an exception for the home story to be /.

Since a catch-all route resolves at runtime, Nuxt’s crawler can’t find links when it renders the website. To deploy in SSG mode, use the Content Delivery API’s links endpoint and add the routes to nitro.prerender.routes with the nitro:config hook.

Learn more about Prerendering in the Nuxt documentation.

Nuxt Route Parameters

Content Delivery API: Retrieve a Single Story

Content Delivery API: Retrieve Multiple Stories