Vue Storefront Storyblok

# Installation

Install module into your app.

npm install @vue-storefront/storyblok storyblok-vue  --save

or

yarn add @vue-storefront/storyblok storyblok-vue

Not a Vue Storefront user? You can still use the module in any Nuxt.js application. Learn how.

# Setup

From version 0.2.0 we're using the vue-storefront middleware package. This means that the integration and the API Client connections are handled on server side. To set this new configuration you'll need to follow this steps.

Install @vue-storefront/middleware

npm install @vue-storefront/middleware --save

Create a new file middleware.config.js in your root folder. Pass the configuration.

module.exports = {
  integrations: {
    sb: {
      location: '@vue-storefront/storyblok/server',
      configuration: {
        token: 'CONTENT_DELIVERY_TOKEN',
        cacheProvider: 'memory',
      },
    },
    // other configs
  },
}

In the nuxt.config.js file just leave the module initialization. Like this.

modules: ['@vue-storefront/storyblok/nuxt']

TIP

In case of using i18n module with your application please keep the proper order of modules registration. You can read more about it here (opens new window).

You will also need to register Storyblok module as a rawSource in the @vue-storefront/nuxt module. Like that.

['@vue-storefront/nuxt', {
  ...
  useRawSource: {
    dev: ['@vue-storefront/storyblok'],
    prod: ['@vue-storefront/storyblok']
  }
}],

Still using the < 0.2.0 version? Check the old installation guide here.

# Middleware configuration options

# token

  • Type: token: string
  • Description: The Storyblok API access token.

# cacheProvider

  • Type: cacheProvider: 'none' | 'memory'
  • Description: The Storyblok client comes with a caching mechanism. When initializing the Storyblok client you can define a cache provider for caching the requests in memory.

# Nuxt module options

# jsBridge

  • Type: jsBridge: string (url)
  • Description: The Storyblok JS Bridge.
// nuxt.config.js
{
  "modules": [
    [
      "@vue-storefront/storyblok/nuxt",
      {
        "jsBridge": "https://app.storyblok.com/f/storyblok-v2-latest.js"
      }
    ],
    // other modules
  ]
}

IMPORTANT: From version 0.3.0 the Storyblok Bridge v1 is deprecated.

# Not a Vue Storefront user?

If you want to use this integration with a stand-alone Nuxt app you will need additional Vue Storefront Nuxt module. It will handle the asynchronous requests, install the Nuxt Composition API module and will provide some extra methods like onSSR.

Install @vue-storefront/nuxt module into your app.

npm i @vue-storefront/nuxt --save

or

yarn add @vue-storefront/nuxt

Then register it in the nuxt.config file.

modules: [
  ['@vue-storefront/nuxt'],
]

← Content Creation →