Features

✨ Safe Rendering - No v-html or dangerouslySetInnerHTML, all content is rendered through Vue components
🎨 Custom Components - Replace any markdown element with your own Vue components
🔌 Plugin Support - Full support for remark and rehype plugins
📝 GFM & More - GitHub Flavored Markdown, math (KaTeX), diagrams (Mermaid), and syntax highlighting
⚡ Async Support - Built-in async components for Suspense and reactive updates
🧠 Streaming-Friendly - Preserve the last successful render during invalid intermediate LLM or streamed markdown updates
🎯 TypeScript - Fully typed with comprehensive type definitions

Quick Start

Installation

npm install vuemarkik
# or
pnpm add vuemarkik
# or
yarn add vuemarkik

Basic Usage

<script setup>
import { Markdown } from 'vuemarkik';
</script>

<template>
  <Markdown text="# Hello World" />
</template>

Async Rendering

Use MarkdownAsync when your markdown pipeline depends on async remark/rehype plugins and you already use Vue Suspense:

<script setup>
import { MarkdownAsync } from 'vuemarkik';
</script>

<template>
  <Suspense>
    <MarkdownAsync :text="markdown" :rehype-plugins="rehypePlugins" />
  </Suspense>
</template>

Use MarkdownHooks when the markdown changes reactively over time, especially for streamed or incrementally generated content:

<script setup>
import { MarkdownHooks } from 'vuemarkik';
</script>

<template>
  <MarkdownHooks
    :text="llmOutput"
    error-mode="silent"
    @render-error="reportMarkdownIssue"
  />
</template>

Custom Rendering

You can replace markdown tags with your own Vue components:

<script setup>
import { Markdown } from 'vuemarkik';
import CustomHeading from './CustomHeading.vue';
</script>

<template>
  <Markdown :text="markdown" :components="{ h1: CustomHeading }" />
</template>

Error Handling

All rendering components support the errorMode prop:

• 'silent' keeps the last successful render and emits render-error
• 'warn' keeps the last successful render, emits render-error, and logs a warning
• 'throw' rethrows render failures

This is especially useful for streamed markdown where intermediate output may be temporarily invalid.

Components

VueMarkik exports four rendering helpers:

• Markdown for synchronous rendering
• MarkdownAsync for async rendering inside Vue <Suspense>
• MarkdownHooks for reactive async rendering without Suspense
• MarkdownChildNodes for rendering nested markdown inside custom slots or components

Documentation

📚 Full Documentation

Getting Started

• Installation & Basic Usage - Get up and running with VueMarkik

Features & Examples

• Syntax Highlighting - Code block highlighting with Shiki
• GitHub Flavored Markdown - Tables, task lists, and more
• KaTeX Math - Render mathematical equations
• Mermaid Diagrams - Create diagrams and flowcharts

Advanced Usage

• Custom Vue Components - Replace markdown elements with your components
• Streaming Markdown - Handle incremental and LLM-style markdown updates
• Remark & Rehype Plugins - Extend markdown processing
• API Reference - Complete API documentation

Development

For contribution guidelines, please see CONTRIBUTING.md

Install dependencies

pnpm install

Run the playground

pnpm playground

Run tests

pnpm test

Build the library

pnpm build

License

MIT © 2025-present Tom Auger