FAQ

How to render Richtext in Nuxt.js

To render the Richtext field in Nuxt you just need to use the richTextResolver.render function of the object $storyapi that gets attached when you installed the module storyblok-nuxt.

<template>
  <div>
    <div v-html="richtext"></div>
  </div>
</template>

<script>
export default {
  props: ['text'],
  computed: {
    richtext() {
      return this.$storyapi.richTextResolver.render(this.text)
    }
  }
}
</script>

How to render inline blocks?

If you use inline blocks you can define a dynamic component resolver with setComponentResolver by installing the npm module v-runtime-template.

<template>
  <div>
    <v-runtime-template :template="richtext" />
  </div>
</template>

<script>
import VRuntimeTemplate from "v-runtime-template"

export default {
  props: ['text'],
  created() {
    this.$storyapi.setComponentResolver((component, blok) => {
      return `<component :blok='${JSON.stringify(blok)}'
                         :is="'${component}' | dashify"></component>`
    })
  },
  components: {
    VRuntimeTemplate
  },
  computed: {
    richtext() {
      return '<div>' + this.$storyapi.richTextResolver.render(this.text) + '</div>'
    }
  }
}
</script>