Examples

Default usage

Let's say you defined a schema for a grid in storyblok. Let's say you want to fill the grid with logos - so you define an additional storyblok schema for a logo. The blok object will look something like this:

{
  "_uid": "10a9f451-4e30-47e1-ba7a-08d3ac8b3fbe",
  "component": "Grid",
  "logos": [
    {
      "_uid": "20a9f451-4e30-47e1-ba7a-08d3ac8b3fbe",
      "component": "Logo",
      "image": {
        "filename": "logo-1.svg"
      }
    },
    {
      "_uid": "30a9f451-4e30-47e1-ba7a-08d3ac8b3fbe",
      "component": "Logo",
      "image": {
        "filename": "logo-2.svg"
      }
    }
  ]
}

We will use the Blok component inside Parent.vue to load the Grid and its components according to the schema:

Parent.vue

<template>
  <Blok :blok="blok" />
</template>

<script>
export default {
  data() {
    return {
      // this is one blok schema
      blok: {
        _uid: '10a9f451-4e30-47e1-ba7a-08d3ac8b3fbe',
        component: 'Grid',
        logos: [{
          _uid: '20a9f451-4e30-47e1-ba7a-08d3ac8b3fbe',
          component: 'Logo',
          image: {
            filename: 'logo-1.svg'
          },
        }, {
          _uid: '30a9f451-4e30-47e1-ba7a-08d3ac8b3fbe',
          component: 'Logo',
          image: {
            filename: 'logo-2.svg'
          },
        }]
      }
    }
  }
}
</script>

Let's say the Grid component will look something like this:

Grid.vue

<template>
  <div class="grid">
    <slot name="logos" />
  </div>
</template>

<script>
export default {
  props: {
    blok: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

...while the Logo component is used to display the images:

Logo.vue

<template>
  <img :src="blok.filename" />
</template>

<script>
export default {
  props: {
    blok: {
      type: Object,
      default: () => ({
        filename: null,
      }),
    },
  },
};
</script>

...whereas the rendered output will look like this:

<div class="grid">
  <img src="logo-1.svg" />
  <img src="logo-2.svg" />
</div>

Scoped slots

It's possible to use scoped slots in components which are loaded through Blok. We could easily pass additional stuff into the child Blok's. Let's add some additional slot data in Grid:

Grid.vue

<template>
  <div class="grid">
    <slot name="logos" width="320" />
  </div>
</template>

<script>
export default {
  props: {
    blok: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

...to use in the Logo component:

Logo.vue

<template>
  <img :src="blok.filename" :width="width" />
</template>

<script>
export default {
  props: {
    blok: {
      type: Object,
      default: () => ({
        filename: null,
      }),
    },
    width: {
      type: Number,
      default: 480
    }
  },
};
</script>

This will end up in the following output:

<div class="grid">
  <img src="logo-1.svg" width="320" />
  <img src="logo-2.svg" width="320" />
</div>