Tags

external
Vue.js
Rich text

Vue.js rich text renderer

For Vue.js, we wrote a helper library that makes the integration process of rich texts from caisy very simple.

To install, use npm or another package manager:

npm install @caisy/rich-text-vue-renderer --save

For ease of use, just pass the JSON and the component will convert it to HTML:

<template>
  <div v-if="data?.text && data?.text?.json">
    <RichTextRenderer :node="data.text.json" />
  </div>
</template>

<script>
import { RichTextRenderer } from "@caisy/rich-text-vue-renderer";
...
</script>

To ensure that you pass the correct object, it should contain something like this:

{ type: "doc", ... }

An example using the rich text render with Vue.js and Nuxt can also be found here on Stackblitz:
https://stackblitz.com/github/caisy-io/caisy-example-nuxt

Tags

external
Vue.js
Rich text