Vue Storefront Storyblok

# Creating content in Storyblok 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.

Let's begin. Go to your Storyblok panel.

1) In the Components tab click New button.

In the panel for creating a new component, provide the name and proper values for the schema. The application will build components based on the schema and map the values to the component props.

By clicking on the schema fields you can change the types of your component props. In most cases, you will use the text and image types.

On top of new created schema for Banner now create real component in your application.

<template>
  <Banner
    :title="title"
    :subtitle="subtitle"
    :description="description"
    :button-text="button_text"
    :link="button_link"
    :image="image.url"
    :background="background"
  />
</template>

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

export default Vue.extend({
  name: 'Banner',
  props: {
    title: {
      type: String,
    },
    subtitle: {
      type: String,
    },
    description: {
      type: String,
    },
    button_text: {
      type: String,
    },
    button_link: {
      type: String,
    },
    image: {
      type: Object,
    },
    background: {
      type: String,
    },
  },
})
</script>

*Banner component comes from the Vue Storefront (opens new window) UI Library

The content that you'll receive from the Storyblok integration will be similar to the one shown below. You can read more about content rendering on the Usage page.

content: [
  {
     component: 'Banner',
     title: 'Your title',
     ...
  }
]

*component property will be added automatically

2) When your components are ready, you can add them to the Page.

To add components to the page, you have to create a new content type that will cover modular construction. For the sake of example, let's call it page and create a new value/prop with the name of content and set its value to Blocks.

Now switch to the Content tab and add a new Entry e.g. Home-Page.

Then, adding content is relatively straightforward. All you need to do is add blocks that you've just created to the page and fill them with data. In the end, don't forget to publish the changes.

*More about components and the difference between Content Types and Blocks (nestable components) you can read here (opens new window).

# Last but not least.

Optionally you can set up a real-time Visual Editor in your Storyblok panel.

To do so, go to the Settings page. In the General tab, change the value of the Location (default environment) to http://localhost:3000/ and save the changes. You should see a preview updated in real-time using your local environment. You can read more about this feature in the Real Time Visual Editor section.

That's it 🎉 Now you can move forward to the Usage page related to content fetching and rendering.

← Usage →