Vue Md Loader

✨ Markdown files to ALIVE Vue components.
Alternatives To Vue Md Loader
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Prettier47,322184,190247,9109 hours ago142November 13, 20231,297mitJavaScript
Prettier is an opinionated code formatter.
2 months ago1January 19, 20221,041mitJavaScript
📝A simple and elegant markdown editor, available for Linux, macOS and Windows.
Slidev29,0511183 days ago312November 16, 202353mitTypeScript
Presentation Slides for Developers
Docsify25,5542781866 days ago193June 24, 2023277mitJavaScript
🃏 A magical documentation site generator.
7 days ago50August 10, 2023145agpl-3.0Vue
Wiki.js | A modern and powerful wiki app built on Node.js
Mdx16,0801,3542,68010 days ago116October 24, 202311mitJavaScript
Markdown for the component era
Vitepress9,5192,09814 hours ago197November 25, 2023185mitTypeScript
Vite & Vue powered static site generator.
Vditor7,12211518 days ago318September 26, 202383mitTypeScript
♏ 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
Mavoneditor6,0134131617 months ago182March 14, 2023336mitVue
mavonEditor - A markdown editor based on Vue that supports a variety of personalized features
6 days ago32agpl-3.0TypeScript
A highly extensible Markdown editor. Version control, AI completion, mind map, documents encryption, code snippet running, integrated terminal, chart embedding, HTML applets, Reveal.js, plug-in, and macro replacement.
Alternatives To Vue Md Loader
Select To Compare

Alternative Project Comparisons


CI NPM Downloads NPM Version License

loader version webpack version
2.x 5
1.x 4 and lower


Webpack loader for converting Markdown files to ALIVE Vue components.

  • Configurable Markdown-It parser.
  • Built-in syntax highlighter with highlightjs.
  • Live demo✨ support. Extremely useful for document examples.
  • Vue 3 & vue-cli usage support.
  • Hot reload.


This page ( is generated by a markdown file. Source: /example.

There is also a Vue 3 & Vue-cli example: /example-vue3.



npm install vue-md-loader --save-dev


yarn add vue-md-loader --dev



Simply use vue-md-loader to load .md files and chain it with your vue-loader.

module.exports = {
  // ...
  module: {
    rules: [
      // ...
        test: /\.md$/,
        loader: 'vue-loader!vue-md-loader'

Note that to get code highlighting to work, you need to:

  • include one of the highlight.js css files into your project, for example: highlight.js/styles/github-gist.css.
  • specify a lang in code block. ref: creating and highlighting code blocks.

With Options

module.exports = {
  // ...
  module: {
    rules: [
      // ...
        test: /\.md$/,
        loaders: [
            loader: 'vue-md-loader',
            options: {
              // your preferred options

✨ Markdown Alive!

A live demo is:

  <div class="cls">{{msg}}</div>
  export default {
    data () {
      return {
        msg: 'Hello world!'
  .cls {
    color: red;
    background: green;
<!-- some-live-demo.vue -->

becomes something like:


A Vue component with all it's <template>, <script> and <style> settled will be inserted before it's source code block.

Multiple lives inside a single markdown file is supported by:

  • All <script> from different code blocks:
    • code inside export default will be extract into it's own Vue component with no conflicts.
    • code before export default will be extract into the same top-level component.
  • All <style> from different code blocks will be extract into the same top-level component.


  • Loader will treat the entire block as template if no <template> found in live block.
  • You will need runtime + compiler build of Vue.js for this feature. For example:
module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1



String. Default: section

The wrapper of entire markdown content, can be HTML tag name or Vue component name.



Markdown-It options. Default:

  html: true,
  highlight: function (str, lang) {
    if (lang && hljs.getLanguage(lang)) {
      try {
        return hljs.highlight(str, { language: lang }).value
      } catch (__) {}
    return ''



Markdown-It plugins list. For example:

// ...
plugins: [
  // Without option
  // With options
      // ...
// ...



Markdown-It renderer rules. For example:

rules: {
  'table_open': () => '<div class="table-responsive"><table class="table">',
  'table_close': () => '</table></div>'


Function. For example:

preProcess: function(source) {
  // do anything
  return source


Function. For example:

// This is useful when used with front-matter-loader to set the page title in nuxt projects
process: function(source){
  let attrs = (source && source.attributes) || {}
  attrs.title = attrs.title || ""
  return {
    template: source.body,
    style: "",
    script: `export default {
        return {
          title: '${attrs.title}'


Function. For example:

afterProcess: function(result) {
  // do anything
  return result


Boolean. Default: true

Enable / Disable live detecting and assembling.


Regex. Default: /<!--[\s]*?([-\w]+?).vue[\s]*?-->/i

A code block with livePattern inside itself becomes a live block. The matched body will become the live Vue component's name and reference (note that they must be unique to each other within the same page).


Function. Default: null

Use this if you wish to change the live template manually after process (e.g. add wrappers). For example:

afterProcessLiveTemplate: function(template) {
  return `<div class="live-wrapper">${template}</div>`

Build Setup

# install dependencies
npm install

# serve example with hot reload at localhost:8888
npm run dev

# run all tests
npm test



Popular Vue Projects
Popular Markdown Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Vue Component
Webpack Loader