Vue Tiptap Renderer

A Vue component to render JSON content generated by tiptap editor

✔️ Supported features

• Headings
• Blockquote
• Bullet list
• Ordered list
• Line feed
• Images
• Marks
  • Text styles
    • Text align
    • Font family (customisable class name)
  • Bold
  • Italic
  • Underline
  • Strike
• Links

If any feature is missing a console.warn will pop. Do not hesitate to start a new issue to request missing feature.

Usage

npm i @leo91000/vue-tiptap-renderer
# or
yarn add @leo91000/vue-tiptap-renderer
# or
pnpm add @leo91000/vue-tiptap-renderer

<script setup lang="ts">
import type { JSONContent } from '@leo91000/vue-tiptap-renderer'
import { JsonRenderer } from '@leo91000/vue-tiptap-renderer'

defineProps<{
  article: JSONContent
}>()
</script>

<template>
  <JsonRenderer
    :content="article"
  />
</template>

Utils

This library also features utility functions :

• getContentFirstImage: Return the first image found in the JSON or null
• getContentWordCount: Return the total word count of the JSON content