DEV Community

Cover image for How to add Storyblok CMS to Vue Storefront 2
Jakub Andrzejewski for Vue Storefront

Posted on • Updated on

How to add Storyblok CMS to Vue Storefront 2

At first glance, having a Content Management System might not be that important, but I can assure you that when your E-Commerce system will start to grow, having CMS will prove to be very useful. I have been working with several CMS's already and I had the best experience with Storyblok and wanted to show you how to connect it to Vue Storefront project.

Below you can see a video of my talk at Vue Storefront Conference about building an E-Commerce with Vue Storefront, Shopify and Storyblok:

Below is a step by step video tutorial on how to add Storyblok Headless CMS to Vue Storefront 2 project with Shopify E-Commerce Platform:

No worries, the integration with Storyblok works the same way for other E-Commerce integrations like Magento, Vendure and many more. The process is exactly the same. I selected Shopify due to easiness of setting up.

Code

First of all, let's install the vue-storefront/storyblok and storyblok-vue packages:

yarn add @vue-storefront/storyblok storyblok-vue # npm install @vue-storefront/storyblok @storyblok/vue
Enter fullscreen mode Exit fullscreen mode

Next, let's create a cms folder inside a root directory:

mkdir cms
Enter fullscreen mode Exit fullscreen mode

And copy a special RenderContent.vue component from @vue-storefront/storyblok package:

cp node_modules/@vue-storefront/storyblok/components/RenderContent.vue cms/
Enter fullscreen mode Exit fullscreen mode

This component will be used to render the content we will get from the Storyblok into our application.

Now, we will create a dynamic Banner.vue component based on Storefront UI SfBanner.vue component. If you haven't tried the Storefront UI library yet you can do so here. Keep in mind that the names of properties in Storyblok must be the same as the names of your props. I am explaining it in a video.

<template>
  <SfBanner
    :title="title"
    :subtitle="subtitle"
    :description="description"
    :button-text="banner_text"
    :link="banner_link"
    :image="image.url"
  />
</template>

<script lang="ts">
import Vue from 'vue'
import { SfBanner } from '@storefront-ui/vue';

export default Vue.extend({
  name: 'Banner',
  components: {
    SfBanner
  },
  props: {
    title: {},
    subtitle: {},
    description: {},
    banner_text: {},
    banner_link: {},
    image: {
      type: Object,
      required: true
    },
    background: {}
  }
})
</script>
Enter fullscreen mode Exit fullscreen mode

The next step right now is to create a cms.js plugin inside of plugins directory:

import Vue from 'vue'
import Banner from '~/cms/Banner.vue'

Vue.component('banner', Banner)
Enter fullscreen mode Exit fullscreen mode

In order for the integration to work correctly we have to register it in the middleware.config.js file:

module.exports = {
  integrations: {
    shopify: { ... }
    },
    sb: {
      location: '@vue-storefront/storyblok/server',
      configuration: {
        token: process.env.STORYBLOK_TOKEN,
        cacheProvider: 'memory',
      },
    }
  }
};
Enter fullscreen mode Exit fullscreen mode

After that, we need to register few things in the nuxt.config.js file for the integration to work as expected:

...
  plugins: [
    '~/plugins/scrollToTop.client.js',
    '~/plugins/cms' // <-
  ],
...
buildModules: [
    // to core
    '@nuxtjs/composition-api/module',
    '@nuxtjs/pwa',
    '@nuxt/typescript-build',
    '@nuxtjs/style-resources',
    '@nuxtjs/device',
    [
      '@vue-storefront/nuxt',
      {
        useRawSource: {
          dev: ['@vue-storefront/shopify', '@vue-storefront/core', '@vue-storefront/storyblok'], // <-
          prod: ['@vue-storefront/shopify', '@vue-storefront/core', '@vue-storefront/storyblok'] // <--
        }
      }
    ],
    ['@vue-storefront/nuxt-theme'],
    [
      '@vue-storefront/shopify/nuxt',
      {
        i18n: {
          useNuxtI18nConfig: true
        }
      }
    ]
  ],
...
  modules: [
    '@vue-storefront/storyblok/nuxt', // <-
    'nuxt-i18n',
    'cookie-universal-nuxt',
    'vue-scrollto/nuxt',
    '@vue-storefront/middleware/nuxt'
  ],
...
Enter fullscreen mode Exit fullscreen mode

Finally, don't forget to add an environment variable to .env with your Storyblok token:

STORYBLOK_TOKEN=<YOUR_STORBLOK_TOKEN>
Enter fullscreen mode Exit fullscreen mode

Storyblok

In this part, we will switch from the code into Storyblok in order to create content in CMS and configure it to work with Vue Storefront

We will create a new space for our project:

Storyblok Space

Now, let's move into components section and create a banner component:

Storyblok Component

Next, in the content section copy the Storyblok token and put it into your application (unless you did that already)

Storyblok Content

To make the Storyblok preview work as expected, add location in the configuration:

Storyblok preview

Finally, in the content configuration, add a real path:

Storyblok Content Configuration

If we have configured everything correctly, we should see our application inside Storyblok preview:

Storyblok VSF Preview

Code part two

Now that we have Storyblok configured, let's jump in once again to the code to add dynamic content to our application.

In the Home.vue page, let's add few things to allow dynamic content. First of all add below line somewhere in your template tag:

<template>
...
  <render-content :content="body" />
...
</template>
Enter fullscreen mode Exit fullscreen mode

Next, in the script section let's import the required components and composables:

<script>
import { useContent } from '@vue-storefront/storyblok'
import RenderContent from '~/cms/RenderContent.vue'
...

export default {
  ...
  components: {
    ...
    RenderContent
  },
  setup() {
    ...
    const { search, content } = useContent('home')
    const body = computed(() => content.value.body)

    onSSR(async () => {
      ...
      await search({ url: `home?cv=${Math.floor(Date.now()/1000)}` })
    });

    return {
      ...
      body
    };
  }
}
</script>
Enter fullscreen mode Exit fullscreen mode

Storyblok part two

The final step is to add a new content for banner component inside Storyblok:

Storyblok Content Component

If we did everything correctly, we should see the following result in both Storyblok preview and our application:

New Storyblok Content

Summary

Well done! You have just integrated Storyblok to your Vue Storefront 2 online store. This is just the beginning of the integration and overall content creation but it should be a solid start for building content driven E-Commerce.

Bonus

Discussion (0)