How to render dynamic component defined in JSON using Vue.js

With Vue.js it is unbelievably easy to render dynamic components, which we can utilize to render content with specific components and layouts by only using their name.

A basic content JSON that should be rendered

The content JSON below contains an array called body which consists of multiple objects with different fields and one attribute called component which allows us to determine what component we should use to render its content.

        
      ...
  data() {
    return {
      content: {
        body: [
          {
            _uid: "BUY6Drn9e1",
            component: "foo",
            headline: "Foo"
          },
          {
            _uid: "gJZoSLkfZV",
            component: "bar",
            title: "Bar"
          },
          {
            _uid: "X1JAfdsZxy",
            component: "foo",
            headline: "Another headline"
          }
        ]
      }
    }
  },
...
    

Dynamic components in use

All we have to do to render the above array of objects is to loop through the array itself. Below you can see that we're using a template tag, even tho it would be possible add it directly to the component tag itself (I find it a bit more readable for this tutorial).

Looping through the content array

        
      <template v-for="block in content.body">
  {{block.component}}
</template>
    

Use dynamic components

Now to actually use the dynamic components we pass the name of the component in the :is attribute as shown below. To allow the component to access the current instance properties we're using the block property and pass the current block object itself. We use block or blok in our tutorials as they are not components but instance of component schemas. Since Vue does require a v-bind:key or :key while looping through content we're going to use the property _uid which can basically be anything but should be unique in your content tree.

        
      <template v-for="block in content.body">
  <component :is="block.component" :block="block" :key="block._uid"></component>
</template>
    

Create and include your components

We're using two nested components one is called foo and the other one is called bar.

        
      <template>
  <div class="foo">
    <hr>Hi I'm a Foo component with the headline:
    <h2>{{block.headline}}</h2>
  </div>
</template>

<script>
export default {
  props: {
    block: Object
  },
  name: "foo"
};
</script>
    

Once created you can import the component in your Vue component which contains component approach, or register them globally.

        
      import Foo from "./components/Foo";
...
  components: {
    Foo
  }
...
    

There are only two points different between foo and bar as one uses the property headline and the other title to showcase that the components can be completely different from their structure. They can even contain another content array and use the component approach in them as well to build a more complex layout.

Editing the JSON

You can now add more components of the type foo and bar with different title/headline values and they will be rendered as if you would add them statically under each other. The order in the JSON defines the order of them being rendered.

With Storyblok you're able to build such a structure with reusable and nestable components. Using the blocks field type you are able to add the exact behavior as you would edit the JSON directly, but in an easy to use interface. After adding the content in the interface you're able to consume our Content Delivery API. You can try it yourself and exchange the static content by loading content from our API.

Codesandbox example

Open our codesandbox example in a new Tab.