Installation

To use our Kentico integration, you need to add the @vsf-enterprise/kentico-kontent package into your Vue Storefront application:

npm install @vsf-enterprise/kentico-kontent --save

or

yarn add @vsf-enterprise/kentico-kontent

This is an Enterprise package

This package is part of our Enterprise offering and is only available from our private registry. To install it, you'll need to have access to it and be logged in. To gain access, please get in touch with our Sales team (opens new window).

Setup

---

Open the middleware.config.js file in your project's root folder and add the Kentico Kontent configuration below:

// middleware.config.js
module.exports = {
  integrations: {
    kntk: {
      location: '@vsf-enterprise/kentico-kontent/server',
      configuration: {
        projectId: 'KENTICO_PROJECT_ID'
      }
    }
  }
};

Next, open the nuxt.config.js file and add the @vsf-enterprise/kentico-kontent/nuxt package to the modules array:

// nuxt.config.js
export default {
  modules: [
    '@vsf-enterprise/kentico-kontent/nuxt'
  ]
}

Finally, add the @vsf-enterprise/kentico-kontent to both arrays in the useRawSource object in the @vue-storefront/nuxt module:

// nuxt.config.js
export default {
  modules: [
    ['@vue-storefront/nuxt', {
      useRawSource: {
        dev: ['@vsf-enterprise/kentico-kontent'],
        prod: ['@vsf-enterprise/kentico-kontent']
      }
    }]
  ]
}

Setup for Content Rendering

---

First, copy the special RenderContent.vue component from the integration package.

cp node_modules/@vsf-enterprise/kentico-kontent/components/RenderContent.vue components/cms/

Next, register your components. You can do this in two ways: adding them to the RenderContent.vue component or registering them globally.

To register components globally, you must add the components section to nuxt.config.js and specify the path to the components directory. This way, you'll be able to use those components anywhere in the application without registering them locally:

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

Vue.component(Banner)

// nuxt.config.js
export default {
  components: ['~/components/cms/'],
}