---
title: Integrate Nuxt with Storyblok
description: This guide walks you through integrating Storyblok as a headless CMS, fetching content, and building components to render it in your Nuxt project.
url: https://www.storyblok.com/docs/guides/nuxt
---

# Integrate Nuxt with Storyblok

Use Storyblok to manage the content of your Nuxt application.

## Quickstart

The fastest way to get started is using Storyblok’s Core Blueprint or CLI wizard:

-   Blueprint (UI)
    
    Use [Storyblok’s Core Blueprint](/docs/concepts/blueprints) to [launch a Nuxt project](https://app.storyblok.com/#/spaces/new/blueprint?blueprintReference=starter), complete with a space, GitHub repository, and deployment environment.
    
    Log in to [Storyblok](https://app.storyblok.com/#/me/spaces), select **\+ Add Space** → **Start from Blueprint**, and follow the steps.
    
-   CLI
    
    Use [Storyblok’s CLI](/docs/libraries/storyblok-cli) to set up a new space and scaffold a Nuxt project. In the terminal, run:
    
    ```bash
    storyblok create --template nuxt
    ```

## Manual setup

Alternatively, set up the project from scratch and configure your frontend code.

This guide has been tested with the following package versions:

-   `nuxt@4.2.2`
-   `@storyblok/nuxt@9`
-   `Node.js v22.14.0`

[No Storyblok account?](https://app.storyblok.com/#/signup)Sign up and create a space for free

1.  **Create a [new space](https://app.storyblok.com/#/me/spaces/new?tab=select-plan)**
    
    Log in to [Storyblok](https://app.storyblok.com/#/me/spaces), select **\+ Add Space** → **New Space**, and follow the steps.
    
2.  **Create a Nuxt project**
    
    Create a new Nuxt project following the official [installation guide](https://nuxt.com/docs/4.x/getting-started/installation).
    
3.  **Install `@storyblok/nuxt`**
    
    In the terminal, `cd` into the project, and install the package.
    
    ```bash
    npm install @storyblok/nuxt
    ```
    

Next, in the `nuxt.config.ts` configuration file, add the Storyblok module:

nuxt.config.ts

```javascript
export default defineNuxtConfig({
  devtools: { enabled: true },
  modules: [
    [
      "@storyblok/nuxt",
      {
        accessToken: process.env.STORYBLOK_DELIVERY_API_TOKEN,
        apiOptions: {
          region: "eu",
        },
      },
    ],
  ],
});
```

> [!WARNING]
> Ensure to set the correct `region` value depending on the server location of your Storyblok space. Learn more in the [@storyblok/js package reference](https://www.storyblok.com/docs/libraries/js/js-sdk).

In the root of your project, create a `.env` file with the access token from your space.

.env

```bash
STORYBLOK_DELIVERY_API_TOKEN=<YOUR-ACCESS-TOKEN>
```

> [!NOTE]
> Learn how to get an [access token](/docs/concepts/access-tokens) for your Storyblok project.

The Storyblok integration makes features like fetching, components registration, and bridge available across your project.

## Fetch a single story

Remove `app.vue` and create a new file `app/pages/index.vue` with the `useAsyncStoryblok` to fetch a story’s data.

app/pages/index.vue

```vue
<script setup>
const { story } = await useAsyncStoryblok("home", {
  api: {
    version: "draft", // or 'published'
  },
});
</script>

<template>
  <StoryblokComponent v-if="story" :blok="story.content" />
</template>
```

The `StoryblokComponent` dynamically renders content type and nestable blocks. In this case, it looks for the content type block of the home story.

## Create and register blocks

Create a `Page.vue` component to render all stories of the `page` content type, such as the home story.

app/storyblok/Page.vue

```vue
<script setup>
defineProps({ blok: Object });
</script>

<template>
  <main v-editable="blok">
    <StoryblokComponent v-for="currentBlok in blok.body" :key="currentBlok._uid" :blok="currentBlok" />
  </main>
</template>
```

Using `StoryblokComponent`, iterate through the `body` field and render the blocks in it.

> [!TIP]
> In Nuxt, Pascal-case named components (e.g. `ExampleComponent.vue`) placed in the `storyblok` folder will be imported automatically. Learn more in the `@storyblok/nuxt` package reference.

Stories can have a `body` field that contains an array of custom type blocks, such as Feature, Teaser, and Grid.

Create the code for these components as follows.

app/storyblok/Feature.vue

```vue
<script setup>
defineProps({ blok: Object });
</script>

<template>
  <div class="feature">
    <span>{{ blok.name }}</span>
  </div>
</template>
```

app/storyblok/Teaser.vue

```vue
<script setup>
defineProps({ blok: Object });
</script>

<template>
  <div class="teaser">
    <h2>{{ blok.headline }}</h2>
  </div>
</template>
```

app/storyblok/Grid.vue

```vue
<script setup>
defineProps({ blok: Object });
</script>

<template>
  <div class="grid">
    <StoryblokComponent v-for="currentBlok in blok.columns" :key="currentBlok._uid" :blok="currentBlok" />
  </div>
</template>
```

Similar to `Page.vue`, `Grid.vue` iterates over the `columns` block field.

Run the server and visit the site in your browser.

```bash
npm run dev
```

## Related resources

[Storyblok's Nuxt Blueprint Repository](https://github.com/storyblok/blueprint-core-nuxt)

[@storyblok/nuxt Package Reference](https://www.storyblok.com/docs/libraries/js/nuxt-sdk)

[Concept: Blocks](/docs/concepts/blocks)

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

[Nuxt Docs](https://nuxt.com/)

## Pagination

-   [Next: Visual Preview in Nuxt](/docs/guides/nuxt/visual-preview)