Vue Storefront Contentstack

# Installation

Install module into your app.

npm install @vsf-enterprise/contentstack --save

or

yarn add @vsf-enterprise/contentstack

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: {
    cnts: {
      location: '@vsf-enterprise/contentstack/server',
      configuration: {
        key: 'CONTENT_DELIVERY_KEY',
        token: 'CONTENT_DELIVERY_TOKEN',
        env: 'CONTENT_ENV',
        region: 'REGION_KEY', // (set 'EU' for European data center, remove for US)
      },
    },
    // ... other configs
  },
}

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

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

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

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

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

# Fetch Options

This feature provide options to manipulate request timeout. Available options:

  • timeout - The number of ms to timeout request. [default: 30000]
  • retryLimit - The number of retries before failure. [default: 5]
  • retryDelay - The number of ms to use for operation retries. [default: 300]
  • retryCondition- A function to determine if the error can be retried. [default: retry on statuses 408, 429]

# 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 →