@bicou/nuxt-typography-prosemirror v0.1.2

@bicou/nuxt-typography-prosemirror

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

Setup

Make sure to install the dependencies:

pnpm install @bicou/nuxt-typography-prosemirror

Usage

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

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

Use the ProseMirrorNode component to render the prosemirror node:

<script setup lang="ts">
// prosemirror document
const node = {
  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 -->
  <prose-mirror-node :node="node" />
</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 for more examples : https://nuxt-typography-prosemirror.vercel.app/