@huiji/vue-markdown-loader

A webpack loader for loading markdown files as Vue Single-File Components

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
10Apr 10, 2019Sep 1, 2018Minified + gzip package size for @huiji/vue-markdown-loader in KB

Readme

vue-markdown-loader

A webpack loader for loading markdown files as Vue Single-File Components, based on MarkdownIt

Features

  • supports all <script> and <style> types of Vue Single-File Components
  • auto convert internal links to Vue <router-link>
  • customize MarkdownIt options and additional plugins
  • insert anchor to headings (base on markdown-it-anchor)
  • custom container (base on markdown-it-container) TODO
  • front matter TODO
  • highlighting TODO

Usage

npm i -D @void/vue-markdown-loader

# or use yarn
yarn add -D @void/vue-markdown-loader

webpack

// webpack.config.js
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  resolve: {
    extensions: ['.js', '.jsx', '.vue', '.json', '.md'],
  },
  module: {
    rules: [
      {
        test: /\.md$/,
        use: [
          {
            loader: 'vue-loader',
          },
          {
            loader: '@void/vue-markdown-loader',
          },
        ],
      },
    ],
  },
  plugins: [new VueLoaderPlugin()],
};

vue-cli 3.0

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.resolve.extensions.merge(['.md']);

    config.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('@void/vue-markdown-loader')
      .loader('@void/vue-markdown-loader')
      .end();
  },
};

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.