vue-markdown-loader

Convert Markdown file to Vue Component using markdown-it.

Example

• https://github.com/mint-ui/docs
• https://github.com/elemefe/element

Demo

Youku Video

Installation

# For Vue1
npm i vue-markdown-loader@0 -D

# For Vue2
npm i vue-markdown-loader -D

Feature

• Hot reload
• Write vue script
• Code highlight

Usage

Documentation: Using loaders

webpack.config.js file:

module.exports = {
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader'
      }
    ]
  }
};

Options

reference markdown-it

{
  module: {
    rules: [
      {
        test: /\.md$/,
        loader: 'vue-markdown-loader'
        options: {
          // markdown-it config
          preset: 'default',
          breaks: true,
          preprocess: function(markdownIt, source) {
            // do any thing
            return source
          },
          use: [
            /* markdown-it plugin */
            require('markdown-it-xxx'),
            /* or */
            [require('markdown-it-xxx'), 'this is options']
          ]
        }
      }
    ]
  }
}

Or you can customize markdown-it

var markdown = require('markdown-it')({
  html: true,
  breaks: true
})

markdown
  .use(plugin1)
  .use(plugin2, opts, ...)
  .use(plugin3);

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

License

WTFPL