Skip to content
Storyblok Documentation Docs

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

Section titled “Fetch and render a story dynamically”

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

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

Section titled “Related resources”

Get in touch with the Storyblok community

DiscordGitHubYouTubeBlueSkyX.comLinkedIn