Vue Storefront Contentful

# Creating content in Contentful CMS

The content that you'll create will be strictly connected with your application codebase and the integration. It's super important to keep consistency and overall order.

Let's begin. Go to your Contentful panel.

1) In the CONTENT MODEL tab click Add Content Type button.

You will see the Content Type creating panel. Provide the name of the new type (i.e. Page).

2) Now when you have your newly created Content Type click on it to edit.

In the Content Type editing panel add new text field for Component and URL and reference one, name it Content.

OK, as we've created the page Content Type let's create our first component.

Click again on a Add Content Type ...

If your Banner.vue app component looks more or less like this one below, you should keep consistency between the real Vue component and your Contentful one.

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

So fill you Contentful component with the same props, like this.

*For the image property use media field.

IMPORTANT: Be sure each component you've created has the Component text field with app component corresponding name.

You can assume that the content you'll receive from the Contentful integration will look like this one below. You can read more about content rendering in the usage tab.

content: [
  {
     component: 'Banner', // name mapped to the Banner.vue
     title: 'Your title',
     ...
  }
]

For this Content Type you can create that many components as you want to use along with your final content structure. So if you want to build your page from Banner and HeroSlider components create representation of them, here in the related Content Type. Just add a new BLOCK per component.

3) OK, now jump back to the CONTENT tab and select Page fom the list.

Here click the Add Page button.

In the Page content creating panel you can define page url and components structure. Add new component from the bottom allocated list and fill it with data.

Just after your content will be polished and ready click Save and Publish in the bottom panel.

Awesome 🎉 Now you can move forward to the content fetching and rendering. This topic and further integration will be covered in the usage tab.

← Usage →