Introduction

The purpose is to render the ProseMirror state JSON data in your Vue applications without loading a full editor or schema.

• From ProseMirror JSON :

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "attrs": {
        "id": "the-line"
      },
      "content": [
        {
          "type": "text",
          "text": "The line."
        }
      ]
    }
  ]
}

• Through Vue Vnodes :

h("div", [h("p", { id: "the-line" }, "The line.")]);

• To DOM :

<div><p id="the-line">The line.</p></div>

Packages

@bicou/prosemirror-render-vue

This Vue plugin is the base package which provides the ProsemirrorRender component with a basic configuration to translate the marks and nodes of ProseMirror to basic HTML tags.

@bicou/prosemirror-render-nuxt

The Nuxt module which integrates the Vue plugin.

@bicou/prosemirror-render-nuxt-typography

A Nuxt layer combining the Nuxt module and the @nuxt-themes/typography layer to render ProseMirror documents with prose components.