---
title: Dynamic Routing in Nuxt
description: Learn how to enable dynamic rendering of new stories by setting up a catch-all route in Nuxt.
url: https://www.storyblok.com/docs/quickstarts/nuxt/dynamic-routing
---

# 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

```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 `index.vue` file from the project.

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](/docs/api/content-delivery/v2/links/retrieve-multiple-links) and add the routes to `nitro.prerender.routes` with the `nitro:config` hook.

Learn more about [Prerendering](https://nuxt.com/docs/4.x/getting-started/prerendering) in the Nuxt documentation.

## Related resources

[Nuxt Route Parameters](https://nuxt.com/docs/4.x/getting-started/routing#route-parameters)

[Content Delivery API: Retrieve a Single Story](/docs/api/content-delivery/v2/stories/retrieve-a-single-story)

[Content Delivery API: Retrieve Multiple Stories](/docs/api/content-delivery/v2/stories/retrieve-multiple-stories)

## Pagination

-   [Previous: Visual Preview in Nuxt](/docs/quickstarts/nuxt/visual-preview)
-   [Next: Content Modeling in Nuxt](/docs/quickstarts/nuxt/content-modeling)