Skip to content
Last update: March 7, 2024

Storyblok Integration

Storyblok is a headless CMS that provides a visual editor for creating and managing content. The integration with Storyblok allows you to create and manage content in Storyblok and display it in the Virto Commerce vue-b2b-theme.

video tutorial

The integration is achieved through the use of the Storyblok API, which allows you to fetch content from Storyblok and display it in the vue-b2b-theme. The integration also provides a way to manage content in Storyblok and update it in the vue-b2b-theme. This guide explores how to integrate Storyblok with the Virto Commerce vue-b2b-theme and provides a practical example of the integration.

Integrate with Virto Commerce vue-b2b-theme

To integrate with Virto Commerce vue-b2b-theme:

  1. Create a Storyblok account. Sign up for a free account on the Storyblok website.
  2. Create a space in Storyblok. A space is a container for your content, and it allows you to organize and manage your content in Storyblok.
  3. Create custom components in Storyblok. This allows you to add existing components from the Virto Commerce vue-b2b-theme to Storyblok and use them to create content.
  4. Create content in Storyblok. Add components to your space and fill them with content.
  5. Fetch content in the vue-b2b-theme using the Storyblok API. The Storyblok API provides a way to fetch content from Storyblok and display it in the vue-b2b-theme. You can fetch content using Storyblok composable, where you should pass content ID. The Storyblok API returns the content as JSON, which you can then display in the vue-b2b-theme.

Readmore Storyblok documentation

Connect Storyblok with Virto Commerce vue-b2b-theme

  1. Install @storyblok/vue, Storyblok SDK for Vue 3:

    yarn add @storyblok/vue

  2. Get your Storyblok API token from the Storyblok dashboard ( Your space → Settings → Access Tokens).

  3. Use the API token in client-app/app-runner.ts as follows:

    client-app/app-runner.ts
     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
    import { createApp } from "vue";
import App from "./App.vue";
import { StoryblokVue, apiPlugin } from "@storyblok/vue";

export default async () => {
    // ...
    const app = createApp(App);

    app.use(StoryblokVue, {
        accessToken: "27ZV5dT9mXG6tEbHraoJSwtt",
        use: [apiPlugin],
    });

    app.mount('#app');
}

Readmore Add a headless CMS to VueJS in 5 minutes

Next Steps