# Installation

Install module into your app.

npm install @vsf-enterprise/contentful --save


yarn add @vsf-enterprise/contentful

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

IMPORTANT: This package is a part of private registry. To install it you'll need to be logged in. If you don't have access to it please contact our support (opens new window).

# 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: {
    cntf: {
      location: '@vsf-enterprise/contentful/server',
      configuration: {
        token: 'CONTENT_DELIVERY_TOKEN',
        space: 'CONTENT_SPACE_ID',
    // ... other configs

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

modules: ['@vsf-enterprise/contentful/nuxt']

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

['@vue-storefront/nuxt', {
  useRawSource: {
    dev: ['@vsf-enterprise/contentful'],
    prod: ['@vsf-enterprise/contentful'],

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

# 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


yarn add @vue-storefront/nuxt

Then register it in the nuxt.config file.

modules: [