@bicou/prosemirror-render-nuxt-typography

Nuxt layer to render ProseMirror JSON data (from Tiptap editor for example) through Nuxt Typography

• ✨  Release Notes
• 📖  Documentation

Setup

Make sure to install the dependencies:

pnpm install @bicou/prosemirror-render-nuxt-typography

Usage

Then add the dependency to their extends in nuxt.config:

defineNuxtConfig({
  extends: ['@bicou/prosemirror-render-nuxt-typography']
})

Use the ProsemirrorRender component to render the prosemirror node:

<script setup lang="ts">
// prosemirror document
const document = {
  type: "doc",
  content: [
    {
      type: "heading",
      attrs: { level: 2 },
      content: [{ type: "text", text: "Simple" }],
    },
    {
      type: "paragraph",
      content: [
        { type: "text", text: "This is a " },
        { type: "text", marks: [{ type: "strong" }], text: "basic" },
        { type: "text", text: " example." },
      ],
    },
    // ...
  ],
};
</script>

<template>
  <!-- render document through nuxt typography -->
  <prosemirror-render :node="document" />
</template>

This example translates to:

<div>
  <prose-h2>Simple</prose-h2>
  <prose-p>This is a <prose-strong>basic</prose-strong> example.</prose-p>
</div>

Consult online demo : https://prosemirror-render-nuxt-typography.vercel.app