vue-renderer-markdown

A Vue 3 component that renders Markdown string content as HTML, supporting custom components and advanced markdown features.

Features

• 📝 Markdown to HTML: Render Markdown string content directly as HTML in your Vue 3 app.
• 🧩 Custom Components: Support for custom Vue components inside Markdown.
• ⚡ Advanced Markdown: Supports tables, math, emoji, checkboxes, and more.
• 📦 TypeScript Support: Full type definitions for props and usage.
• 🔌 Easy Integration: Plug-and-play with Vite, Vue CLI, or any Vue 3 project.

Install

pnpm add vue-renderer-markdown
# or
npm install vue-renderer-markdown
# or
yarn add vue-renderer-markdown

Usage

<script setup lang="ts">
import MarkdownRender from 'vue-renderer-markdown'

const markdownContent = `
# Hello Vue Markdown

This is **markdown** rendered as HTML!

- Supports lists
- [x] Checkboxes
- :smile: Emoji
`
</script>

<template>
  <MarkdownRender :content="markdownContent" />
</template>

Props

| Name | Type | Required | Description | |-------------------|---------------------------|----------|--------------------------------------------------| | content | string | ✓ | Markdown string to render | | nodes | BaseNode[] | | Parsed markdown AST nodes (alternative to content)| | customComponents| Record<string, any> | | Custom Vue components for rendering |

content 和 nodes 必须至少传递一个。

Advanced

• Custom Components: Pass your own components via customComponents prop to render custom tags inside markdown.

• TypeScript: Full type support. Import types as needed:

  import type { MyMarkdownProps } from 'vue-markdown-to-html/dist/types'

License

MIT © Simon He