Integrate Vue with Storyblok

Use Storyblok to manage the content of your Vue project.

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 Vue project, complete with a space, GitHub repository, and deployment environment.

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

storyblok create --template vue

Manual setup

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

This guide has been tested with the following package versions:

vue@3.5.13
vue-router@4.5.0
@storyblok/vue@8.2.2
Node.js v22.13.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 Vue project

Create a new Vue project following the official Quick Start guide. Use the npm create vue command and opt-out of all optional add-ons.
Install @storyblok/vue

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

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

VITE_STORYBLOK_DELIVERY_API_TOKEN="fqc3tdIuC8djNwEYl5cE5Att"

Replace the content of the main.js with the one below:

import { createApp } from "vue";
import { StoryblokVue, apiPlugin } from "@storyblok/vue";
import App from "./App.vue";

const app = createApp(App);

app.use(StoryblokVue, {
  accessToken: import.meta.env.VITE_STORYBLOK_DELIVERY_API_TOKEN,
  apiOptions: {
    region: "eu", // Choose the correct region from your Space.
  },
  use: [apiPlugin],
});

app.mount("#app");

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

Fetch a single story

Create a Home.vue file, with the useStoryblokApi get a client instance to fetch a story’s data.

<script setup>
import { useStoryblok } from "@storyblok/vue";

const story = await useStoryblok("home", {
  version: "draft",
});
</script>

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

This page fetches the home story of your Storyblok space using the convenient useStoryblok composable.

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

Replace the content of the App.vue file with the following to render the home view.

<script setup>
import Home from "./Home.vue";
</script>

<template>
  <main>
    <Suspense>
      <template #default>
        <Home />
      </template>
    </Suspense>
  </main>
</template>

Suspense allows the usage of top-level await syntax inside scripts, like in the Home.vue file to fetch the story data.

Create and register blocks

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

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

<template>
  <StoryblokComponent v-for="currentBlok in blok.body" :key="currentBlok._uid" :blok="currentBlok" />
</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>

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

Add all these new components to your app within the main.js file.

import { createApp } from 'vue';
import { StoryblokVue, apiPlugin } from '@storyblok/vue';
import App from './App.vue';
import Teaser from './components/Teaser.vue';
import Grid from './components/Grid.vue';
import Feature from './components/Feature.vue';

const app = createApp(App);

app.use(StoryblokVue, {
  accessToken: import.meta.env.VITE_STORYBLOK_DELIVERY_API_TOKEN,
  use: [apiPlugin],
});

app.component('Teaser', Teaser);
app.component('Grid', Grid);
app.component('Feature', Feature);
app.mount('#app');