Skip to content
Last update: March 4, 2024


In this article, we will integrate Storyblok CMS into the index page of the Virto Commerce vue-b2b-theme. The integration will allow you to create and manage content in Storyblok CMS and display it in the Virto Commerce vue-b2b-theme.

To use Storyblok CMS with the page:

  1. Create page model in the Storyblok CMS for the index page. The page model defines the properties of the index page and how it is rendered in the Storyblok CMS.
  2. Add Storyblok to the page component in Virto Commerce vue-b2b-theme. This allows you to fetch content from Storyblok and display it in the index page.
  3. Create content. Add components to your page model and fill them with content.

Create Page Model in Storyblok

To create Page Model in Storyblok:

  1. Go to the Block Library menu and click New Block in the top right corner.
  2. Enter the name of the component. We enter Main_page as the name.
  3. Add a new field called body of type Blocks.
  4. Click Save to save the changes.

    Main Page Block

  5. Use this block to create the content for our category page: Go to the Content menu and click on the Create new to create new Story with previously created Catalog block:

    Create New Story

Add Storyblok to the Page Component

To add Storyblok to the page component, add StoryblokComponent into your template. As long as we want replace the content of the page with the content from Storyblok, we use v-if directive to show StoryblokComponent only when story is loaded.

    <div v-if="story">
        <StoryblokComponent v-for="(blok, index) in story?.content?.body" :blok="blok" :key="blok._uid" />
    <div v-else-if="loading" class="min-h-[80vh]">
        <VcLoaderOverlay />

As you can see we are using main-page as a content ID to fetch the content from Storyblok.

import { ref, toValue } from "vue";
import { useI18n } from "vue-i18n";
import { usePageHead } from "@/core/composables";
import { useStoryblok } from "@storyblok/vue";

const { t } = useI18n();

    title: t("pages.home.meta.title"),
    meta: {
        keywords: t("pages.home.meta.keywords"),
        description: t("pages.home.meta.description"),

const story = ref({});

onBeforeMount(async () => {
try {
    loading.value = true;
    story.value = toValue(await useStoryblok("main-page", { version: "draft" }));
} finally {
    loading.value = false;

Now you can preview the index page in the Storyblok and start creating content for it.

Create Content

After adding Storyblok to the page component, start creating content in the Storyblok CMS. Add components to your page model and fill them with content.


Since the index page uses the path /, and Storyblok uses its own slugs for previews, you need to change the Real path in the space settings to /.

Real Path Change

If you have already added custom components to Storyblok, use them to create content for the page.

Readmore Registering Custom Components

As a result, you will get integration of Storyblok CMS with the index page of Virto Commerce vue-b2b-theme:

Storyblok Integration