The component
What is it good for
The Blok
components provides the possibility to automagically load and render a tree of storyblok schemas. It recursively resolves all bloks as single compponents down the leaves.
Usage
Use the Blok
component to load components according to storyblok schemas:
<template>
<Blok :blok="blok" :is-editable="true" />
</template>
<script>
export default {
data() {
return {
// this is one blok schema
blok: {
_uid: "10a9f451-4e30-47e1-ba7a-08d3ac8b3fbe",
component: "Logo",
image: {
filename: "logo.svg",
},
},
};
},
};
</script>
The Blok
component searches for a loader related to blok.component
property. If there exists an additional prefix to the component name which is defined in the schema, it can be passed. If there is no prefix provided, it automatically searches for all possible components, with one of the existing prefixes used to load components through @nuxt/components
.
Props
blok
- type:
Object|BlokSchema
, - default:
() => ({})
The Blok
lazily loads a dynamic component based on the blok.component
property.
Every property of the blok
Object will be searched for possible child blok schema entries. If found, the component renders recursively into a slot
with the name of respective property.
hydration
- type:
String
, - default:
'WhenIdle'
- options:
'WhenIdle'
,'WhenVisible'
,'OnInteraction'
,'Never'
The hydration
prop controls how to the component will be hydrated. The hydration will be done with vue-lazy-hydration
thanks to Markus Oberlehner.
isEditable
- type:
Boolean
, - default:
false
Decide whether to use custom v-editable directive of storyblok-nuxt module or not. Either enable through prop isEditable
of the Blok component globally for all rendered Bloks down the tree or as prop of the blok data blok.isEditable
inside the blok data for single opt-ins.
spreadProps
- type:
Boolean
, - default:
false
Decide whether to spread the proberties of the blok object onto the loaded component or not. If you spread the components e.g. the blok object looks like this:
const blok = {
foo: 123,
bar: "john doe",
};
foo
and bar
gets passed to the component as props foo
and bar
. If you decide to not spread the props (which is the default), then the whole object gets passed to the component as blok
prop.