Storyblok rich text render component

_vue-storyblok-rich-text.md

Vue component for rendering Storyblok rich text

App.vue

<template>
  <div id="app">
    <!-- get page data -->
    <vs-rich-text :document="doc" />
  </div>
</template>

main.js

import RichText from '~/components/layout/RichText'

Vue.component('vs-rich-text', RichText)

new Vue({ el: '#app' })

RichText.vue

<template>
  <!-- eslint-disable-next-line vue/no-v-html -->
  <p v-html="rawHTML" />
</template>

<script>
import StoryblokClient from 'storyblok-js-client'
const sb = new StoryblokClient({})

export default {
  props: {
    document: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    rawHTML () {
      if (!this.document.content) {
        return ''
      }

      return sb.richTextResolver.render(this.document)
    }
  }
}
</script>