UI Components > markdown-design

An out-of-the-box Vue 3 Markdown component with real-time rendering, featuring TOC generation, full-text search, and more.

Package 4 stars GitHub

English | 中文

Vue Markdown Design

An out-of-the-box Markdown rendering component for Vue 3, built on markdown-it.

Key Features

🚀 Core - Real-time Markdown rendering, table of contents generation, and full-text search

📦 Builtins - Includes commonly used Markdown features such as emoji, permalinks, and syntax highlighting

🎨 Theming - Replaceable Markdown themes and component styles configurable via CSS variables

🔌 Plugins - Compatible with markdown-it plugins for flexible extensibility

📱 Responsive - Optimized for both desktop and mobile with responsive layouts

🧩 Modular - Import core features on demand and compose components for flexible layouts

🛡️ Security - HTML sanitization is enabled by default to mitigate XSS and other attacks

📋 Typings - Written in TypeScript with complete type definitions

🧪 Testing - Achieves 99% coverage in both E2E and unit tests, ensuring component stability and reliability

Quick Start

Installation

npm i vue-markdown-design

Usage

// main.js

// Import component
import VueMarkdown from 'vue-markdown-design'

import { createApp } from 'vue'

const app = createApp()

// Register component
app.use(VueMarkdown)

app.mount('#app')

<!-- App.vue -->

<vue-markdown :src="`# Title\nContent`" />

For detailed documentation, visit https://markdown-design.pages.dev.

License

Released under the MIT license.

Back to Vue.js