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)
CLI

Use Storyblok’s Core Blueprint to launch a Nuxt project, complete with a space, GitHub repository, and deployment environment.

Use Storyblok’s CLI to set up a new space and scaffold a Nuxt project. In the terminal, run:

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?Sign up and create a space for free

Create a new space

Log in to Storyblok, select + Add Space → New Space, and follow the steps.
Create a Nuxt project

Create a new Nuxt project following the official installation guide.
Install @storyblok/nuxt

In the terminal, cd into the project, and install the package.
Terminal window
```
npm install @storyblok/nuxt
```

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

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

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

STORYBLOK_DELIVERY_API_TOKEN=<YOUR-ACCESS-TOKEN>

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.

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

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

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.

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

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

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

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

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

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