@bicou/nuxt-typography-prosemirror
v0.1.2
Published
[![npm version][npm-version-src]][npm-version-href] [![npm downloads][npm-downloads-src]][npm-downloads-href] [![License][license-src]][license-href] [![Nuxt][nuxt-src]][nuxt-href]
Downloads
24
Readme
@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/