unplugin-vue-markdown

Compile Markdown to Vue component
4,031,626 626
Install
npm install unplugin-vue-markdown
Latest Version:32.1.1
Vue:3
License:MIT
Last Updated:Aug 25, 2026
Links: GitHub  ·  npm
Maintainer: userquin

unplugin-vue-markdown

NPM version

Compile Markdown to Vue component.

  • 📚 Use Markdown as Vue components.
  • 💚 Use Vue components in Markdown.
  • 🔌 Supports Vite, Webpack, Vue CLI and more, powered by unplugin.
  • ⚡️ The same transformation as VitePress.

Install

npm i unplugin-vue-markdown
Vite
// vite.config.ts
import Vue from '@vitejs/plugin-vue'
import Markdown from 'unplugin-vue-markdown/vite'

export default defineConfig({
  plugins: [
    Vue({
      include: [/\.vue$/, /\.md$/], // <-- allows Vue to compile Markdown files
    }),
    Markdown({ /* options */ }),
  ],
})

Example: examples/vite


Webpack
// webpack.config.js
const Markdown = require('unplugin-vue-markdown/webpack')
const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
  /* ... */
  module: {
    rules: [
      // ... other rules
      {
        test: /\.(vue|md)$/,
        loader: 'vue-loader'
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin(),
    Markdown({ /* options */ })
  ]
}

Vue CLI
// vue.config.js
const Markdown = require('unplugin-vue-markdown/webpack')

module.exports = {
  parallel: false, // Disable thread-loader which will cause errors, we are still investigating the root cause
  chainWebpack: (config) => {
    config.module
      .rule('vue')
      .test(/\.(vue|md)$/) // <-- allows Vue to compile Markdown files

    config
      .plugin('markdown')
      .use(Markdown({
        markdownUses: [
          prism,
        ],
      }))
  },
}

Example: examples/vue-cli


Import Markdown as Vue components

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from './README.md'

export default {
  components: {
    HelloWorld,
  },
}
</script>

Use Vue Components inside Markdown

You can even use Vue components inside your markdown, for example

<Counter :init='5'/>

Related Packages

unplugin-vue-prop

Add import define props type support for Vue3 script-setup and lang is typescrip...

1,105 2
unplugin-vue-i18n

这是一个使用unplugin创建的vite插件, 服务于vue3, 进行i18n国际化转换

8,203
unplugin-image

A universal bundler plugin which imports JPG, PNG, GIF, SVG, and WebP files.

40,041 1
unplugin-config

Register global imports on demand for Vite and Webpack

33,928 28
@code-hud/hud-javascript-bundlers-plugins

Based on starter template for unplugin.

33,515

Version History

Version Released License
32.1.1 MIT
32.1.0 MIT
32.0.0 MIT
31.0.0 MIT
30.0.0 MIT