vue3-markdown-kit

Vue 3 Markdown Kit

A small, auditable Markdown preview toolkit for Vue 3.5. It provides a component-friendly preview API, a framework-independent renderer, and GitHub-style presentation.

This package is the Vue 3 counterpart of vue-markdown-kit. It keeps the same preview props, events, themes, CSS, and import layout while using the Vue 3 application and rendering APIs.

Features

• Vue 3.5 preview component built with the Composition API
• Markdown rendering through markdown-it
• HTML sanitization through DOMPurify
• Opt-in, tree-shakeable highlight.js language registration
• GitHub-style Markdown CSS
• Image-click and rendered-content events
• TypeScript declarations and ESM/CommonJS builds
• Compatibility and modern package entry points

Requirements

• Vue 3.5 or newer
• Node.js 18 or newer for package tooling

Install

npm install vue3-markdown-kit

Recommended usage

Configure the theme once in your application entry point:

import { createApp } from 'vue'
import App from './App.vue'

import VueMarkdownKit, { VMdPreview, githubTheme } from 'vue3-markdown-kit'
import 'vue3-markdown-kit/style/preview.css'
import 'vue3-markdown-kit/theme/style/github.css'

VMdPreview.use(githubTheme)

createApp(App)
  .use(VueMarkdownKit)
  .mount('#app')

The plugin globally registers <v-md-preview>:

<script setup lang="ts">
import { ref } from 'vue'

const markdown = ref('# Hello, Vue 3')

function handleImageClick(images: string[], index: number) {
  console.log(images[index])
}
</script>

<template>
  <v-md-preview
    :text="markdown"
    @image-click="handleImageClick"
  />
</template>

For local registration, import the component directly:

<script setup lang="ts">
import { VMdPreview, githubTheme } from 'vue3-markdown-kit'
import 'vue3-markdown-kit/style/preview.css'
import 'vue3-markdown-kit/theme/style/github.css'

VMdPreview.use(githubTheme)

const markdown = '# Locally registered component'
</script>

<template>
  <VMdPreview :text="markdown" />
</template>

highlight.js

Register only the languages your application uses:

import { VMdPreview, githubTheme } from 'vue3-markdown-kit'
import hljs from 'highlight.js/lib/core'
import javascript from 'highlight.js/lib/languages/javascript'

hljs.registerLanguage('javascript', javascript)

VMdPreview.use(githubTheme, {
  Hljs: hljs,
})

Compatibility entry points

Integrations migrating from the Vue 2 package can retain the old import layout and change only the package name:

import VMdPreview from 'vue3-markdown-kit/lib/preview'
import 'vue3-markdown-kit/lib/style/preview.css'

import githubTheme from 'vue3-markdown-kit/lib/theme/github.js'
import 'vue3-markdown-kit/lib/theme/style/github.css'

VMdPreview.use(githubTheme)

Vue 3 uses createApp(...).use(...); replace any Vue 2 Vue.use(...), Vue.extend(...), $mount(), $on(), and $destroy() integration code with their Vue 3 equivalents.

Framework-independent renderer

The renderer and sanitizer can be used without mounting a Vue component:

import {
  createMarkdownRenderer,
  sanitizeHtml,
} from 'vue3-markdown-kit/core'

const parser = createMarkdownRenderer()
const safeHtml = sanitizeHtml(parser.render('# Hello'))

Preview props

Events

• change(text, html) fires after Markdown is rendered and sanitized.
• image-click(images, index) fires when a rendered image is clicked.

Security

Raw HTML is enabled for compatibility, then sanitized as the final rendering step. Applications that do not need raw HTML can pass html: false when creating a custom renderer. Keep all runtime dependencies updated and apply an application-level Markdown input length limit.

Development

npm ci
npm test
npm run check

The generated lib directory is committed so the package can also be installed directly from GitHub.

License

MIT. See LICENSE and NOTICE.md.