vue-md-loader

vue-md-loader

Introduction

Webpack loader for converting Markdown files to Vue components.

• Configurable Markdown-It parser.
• Built-in syntax highlighter with highlightjs.
• Live demo support. Extremely useful for document examples.
• Hot reload.

Install

NPM:

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

Yarn:

yarn add vue-md-loader --dev

Usage

Example project

Basic

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'
      }
    ]
  }
}

With Options

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

Markdown Alive!

A live demo is:

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

becomes something like:

<some-live-demo/>
<pre><code>...</code></pre>

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.

Note:

• 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
    }
  }
}

Options

wrapper

String. Default: section

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

plugins

Array. Default: []

Markdown-It plugins list. For example:

// ...
plugins: [
  // Without option
  require('markdown-it-plugin-1'),
  // With options
  [
    require('markdown-it-plugin-2'),
    {
      // ...
    }
  ]
]
// ...

markdown

Object.

Markdown-It options. Default:

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

live

Boolean. Default: true

Enable / Disable live detecting and assembling.

livePattern

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.

liveTemplateProcessor

Function. Default: null

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

function wrapIt (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

License

MIT