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.

app/pages/[…slug].vue

<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 /.

Tip

Remove the Home.vue content file from the project.

Note

To deploy in SSG mode, dynamic routes need to be manually defined. Use the links endpoint of the Content Delivery API to provide all routes. Learn more under Prerendering in the Nuxt documentation.

Related resources

Nuxt Route Parameters

Content Delivery API: Retrieve a Single Story

Content Delivery API: Retrieve Multiple Stories