Usage

This integration provides composition functions called composables to fetch data from the Kentico Kontent CMS. Internally it uses the Kentico Kontent REST API. Below you can find detailed instructions on how to use these composables within your Vue Storefront application.

Import and call the useContent composable from the @vsf-enterprise/kentico-kontent package to get access to the state object and methods for fetching data from Kentico.

In the example below, we will call the search method from this composable to get data from the previously created page.

import { onSSR } from '@vue-storefront/core';
import { useContent } from '@vsf-enterprise/kentico-kontent';

export default {
  setup() {
    const { search, content, loading, error } = useContent();
    onSSR(async () => {
      await search({ url: 'home-page' });
    })
    return {
      content
    };
  }
};

Custom content type search

---

If you want to customize the search parameters instead of using page url or id, use the custom property in the search method:

import { onSSR } from '@vue-storefront/core';
import { useContent } from '@vsf-enterprise/kentico-kontent';

export default {
  setup() {
    const { search, content, loading, error } = useContent();
    onSSR(async () => {
      await search({
        custom: {
          type: 'content_type_name',
          field: 'custom_field_name_to_search',
          value: 'custom_field_value_to_search',
        }
      })
    })
    return {
      content
    };
  }
};

Custon Query

Alternatively, you can also pass the customQuery string to define query string parameters used in the HTTP call sent to Kentico. You can find more information about available filters in this Filtering content (opens new window) section in Kentico Kontent documentation.

import { onSSR } from '@vue-storefront/core';
import { useContent } from '@vsf-enterprise/kentico-kontent';

export default {
  setup() {
    const { search, content, loading, error } = useContent();
    onSSR(async () => {
      await search({
        customQuery: `system.type=blog&order=system.last_modified[asc]&depth=2`
      })
    })    
    return {
      content
    };
  }
};

The final request URL with the customQuery will look like this:

client.get('https://deliver.kontent.ai/${projectId}/items?${customQuery}')

Content Rendering

---

Finally, you must pass content data to the RenderContent component as a content prop. Let's see this with a real-life example:

<template>
  <div v-if="loading">Loading content...</div>
  <div v-if="error">Something is wrong!</div>
  <div v-if="content">
    <render-content :content="content" />
  </div>
</template>

<script>
import { onSSR } from '@vue-storefront/core'
import { useContent } from '@vsf-enterprise/kentico-kontent'
// path to the component that you've just copied
import RenderContent from '~/cms/RenderContent.vue'

export default {
  components: {
    RenderContent
  },
  setup() {
    const { search, content, loading, error } = useContent()
    // get data
    onSSR(async () {
      await search({ url: 'home-page' })
    })
    // return data
    return {
      content,
      loading,
      error,
    }
  }
}
</script>

If you followed our examples, the RenderContent component should render the Banner component:

<component is="Banner" v-bind="props" />

You can read about creating components in Kentico Kontent on the Content page.