@comark/vue

Vue renderer for Comark. Render markdown with custom Vue components, streaming support, and SSR.

Features

• 🧩 <Markdown> component for one-shot markdown rendering
• 🎯 Map any Comark tag to a custom Vue component
• 🌊 Streaming-friendly with auto-close and caret support
• 🖥️ SSR-safe, works in Nuxt and Vite
• 🎨 Optional Vite plugin for compile-time component resolution
• 🔌 Plugin ecosystem (math, mermaid, highlight, binding…)

Installation

npm install @comark/vue
# or
pnpm add @comark/vue

Usage

<script setup lang="ts">
import { Markdown } from '@comark/vue'
import math, { Math } from '@comark/vue/plugins/math'

const content = `# Hello\n\nThis is **Comark** in Vue.`
</script>

<template>
  <Markdown :components="{ math: Math }" :plugins="[math()]">
    {{ content }}
  </Markdown>
</template>

Custom components

<script setup lang="ts">
import { Markdown } from '@comark/vue'
import Alert from './components/Alert.vue'
</script>

<template>
  <Markdown :components="{ alert: Alert }">{{ content }}</Markdown>
</template>

::alert{type="warning"}
Heads up!
::

Streaming

<Markdown :streaming="isStreaming" caret>{{ content }}</Markdown>

Using with Vite

@comark/vue ships an optional Vite plugin that:

• Enables <slot unwrap="..."> inside custom markdown components.
• Auto-registers every .vue file under src/components/prose (or components/prose) as a global component.

// vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import comark from '@comark/vue/vite'

export default defineConfig({
  plugins: [vue(), comark()],
})

Pass comark({ prose: false }) to opt out of the auto-registered prose components.

Using with Nuxt

For Nuxt, use @comark/nuxt which auto-imports the <Markdown> component and wires up ~/components/prose overrides.

Documentation

Full guide and API reference at comark.dev/rendering/vue.

License

Made with ❤️

Published under MIT License.