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 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',
	{ 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 /.