---
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://storyblok.com/docs/guides/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

```html
<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](https://www.storyblok.com/docs/api/content-delivery/v2/links/) of the Content Delivery API to provide all routes. Learn more under [Prerendering](https://nuxt.com/docs/getting-started/prerendering) in the Nuxt documentation.

## Related resources

[Nuxt Route Parameters](https://nuxt.com/docs/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/guides/nuxt/visual-preview)
-   [Next: Content Modeling in Nuxt](/docs/guides/nuxt/content-modeling)