Skip to content

Instantly share code, notes, and snippets.

@daaru00
Last active November 21, 2020 22:54
Show Gist options
  • Save daaru00/0598eefa0d4357a8f7b73556622dd031 to your computer and use it in GitHub Desktop.
Save daaru00/0598eefa0d4357a8f7b73556622dd031 to your computer and use it in GitHub Desktop.
Storyblok rich text render component

Vue component for rendering Storyblok rich text

<template>
<div id="app">
<!-- get page data -->
<vs-rich-text :document="doc" />
</div>
</template>
import RichText from '~/components/layout/RichText'
Vue.component('vs-rich-text', RichText)
new Vue({ el: '#app' })
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment