Creating content in Kentico Kontent CMS

The content that you'll create will be strictly connected with your application codebase. It's essential to be consistent with the data and the components created.

Adding content model in Kentico Kontent

---

Go into the Kentico Kontent Dashboard. Click on the Content Model page in the left sidebar and click the Create new button. You should see a page similar to the one shown below.

As an example, we will create a Banner component. Add 6 Text fields named:

• title,
• subtitle,
• description,
• banner_text,
• banner_link,
• background.

Then add one Asset field and name it image.

To make sure you set all key names correctly, click on the {#} icon. This value is set automatically, but you can adjust it if it's needed. Once everything is ready, click the Save changes button.

Integration will map all fields added to the content model to props of the Vue component.

Adding components in Vue Storefront

---

Now that the content model is ready, we can add a Vue component to render the content based on our Banner model.

Create a Banner.vue component in your Vue Storefront project's folder in the components/cms folder. It might look similar to the one below, but primarily you should make it consistent with the Kentico Kontent.

<template>
  <Banner
    :title="title"
    :subtitle="subtitle"
    :description="description"
    :button-text="banner_text"
    :link="banner_link"
    :image="image"
    :background="background"
  />
</template>

<script lang="ts">
import Vue from 'vue'

export default Vue.extend({
  name: 'Banner',
  props: {
    title: {},
    subtitle: {},
    description: {},
    banner_text: {},
    banner_link: {},
    image: {},
    background: {}
  }
})
</script>

When you open the Kentico Kontent and go to the Content & assets tab, you should see a new component available. You can start using it by filling in the values.

Mapping is based on the name

Mapping between the model and component is based on the codename field. You can access and change it by clicking the {#} icon in the upper right corner of the model view. Remember to set this field to match the name of the Vue component.

The content you'll receive from the Kentico Kontent integration will look like the one below. You can read more about content rendering on the Usage page.

{
  content: {
    value: [
      {
        elements: {
          title: {
            value: "Your title",
            ...
          },
          ...
        },
        system: {
          codename: "banner",
          ...
        },
      }
    ]
  }
}

You can create as many components with the Banner content type as you want to use within your final content structure.

Pages

---

Go to the Page page in the Kentico Kontent and add a new page. In the Page creating panel, define the page url and components structure.

Then, add a new component from the list at the bottom and fill it with data.

When your content is ready, you can click the Publish button.

Awesome 🎉  . Now you can move forward and learn about the content fetching and rendering covered on the Usage page.