Skip to content
Add kentico kontent super power to your nuxt app
Branch: master
Clone or download
Alfred Brockotter
Latest commit b9b0cdb Sep 30, 2019

CircleCI semantic-release NPM


Add Kentico Kontent super power to your nuxt app


The module makes it easy to do delivery client api calls via the Kentico kontent Delivery SDK.

Quick start

  • Install via npm
npm i kentico-kontent-nuxt-module --save
npm i rxjs --save (because this is a peer dependency of the Kentico Kontent Delivery SDK)

  • Add kentico-kontent-nuxt-module to modules section of nuxt.config.js
  ** Nuxt.js modules
  modules: [
  kenticokontent: {
    projectId: 'xxxx-xxx-xxxx-xxxx-xxxxx',
    enableAdvancedLogging: false,
    previewApiKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx',
    enablePreviewMode: true,
    baseUrl: 'https://custom.uri/api/KenticoKontentProxy',
    securedApiKey: 'xxx',
    enableSecuredMode: true
  • $deliveryClient is now globally available.
    .then(response => console.log('DeliveryClient Response', response));


By default Nuxt can only work with promises. Therefor you always use the "toPromise" method provided by the Kentico Kontent Delivery SDK! RxJs operator's are not supported at the moment.


API calls can be "cached" (they will be stored in memory) client side via the "viaCache" method.

 const query =  this.$deliveryClient.items().type('page');
 const cacheSeconds = 30;
 this.$deliveryClient.viaCache(query, cacheSeconds)
        .then(response => console.log('DeliveryClient Response', response));


If you need to customize the Kentico Kontent Delivery SDK by registering interceptors and changing global config, you have to create a nuxt plugin.


  modules: [

  plugins: [


export default function ({ store, $deliveryClient }) {
    $deliveryClient.config.globalHeaders = (queryConfig) => {
        let headers = [];
        headers.push({header: 'Authorization', value: 'bearer ' + store.state.token });
        return headers;
You can’t perform that action at this time.