@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-prosemirrorUsage
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/