1. vue-markdown-loader
markdown file to vue component loader.
vue-markdown-loader
Package: vue-markdown-loader
Created by: QingWei-Li
Last modified: Tue, 28 Jun 2022 19:51:18 GMT
Version: 2.5.0
License: WTFPL
Downloads: 5,964
Repository: https://github.com/QingWei-Li/vue-markdown-loader

Install

npm install vue-markdown-loader
yarn add vue-markdown-loader

You have other better choices

  • https://github.com/egoist/vmark
  • https://github.com/liril-net/ware-loader
  • https://github.com/wxsms/vue-md-loader

vue-markdown-loader

npm
vue

Convert Markdown file to Vue Component using markdown-it.

Example

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

Live demo

https://glitch.com/edit/#!/vue-markdown

Installation

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

# For Vue2
npm i vue-markdown-loader -D
npm i  vue-loader vue-template-compiler -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'
      }
    ]
  }
};

With vue-loader 15

 const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.md$/,
        use: [
          {
            loader: 'vue-loader'
          },
          {
            loader: 'vue-markdown-loader/lib/markdown-compiler',
            options: {
              raw: true
            }
          }
        ]
      }
    ]
  },
  plugins: [new VueLoaderPlugin()]
};

With Vue CLI 3

In your vue.config.js file:

 module.exports = {
  chainWebpack: config => {
    config.module.rule('md')
      .test(/\.md/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('vue-markdown-loader')
      .loader('vue-markdown-loader/lib/markdown-compiler')
      .options({
        raw: true
      })
  }
}

Options

preventExtract

Since v2.0.0, this loader will automatically extract script and style tags from html token content (#26). If you do not need, you can set this option

 {
  test: /\.md$/,
  loader: 'vue-markdown-loader',
  options: {
    preventExtract: true
  }
}

wrapper

You can customize wrapper tag no matter html element tag or vue component tag. Default is 'section'

 {
  test: /\.md$/,
  loader: 'vue-markdown-loader',
  options: {
    wrapper: 'article',
  }
}

markdownIt

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

Add Vue configuration

 var webpack = require('webpack');

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

  plugins: [
    new webpack.LoaderOptionsPlugin({
      vue: {}
    })
  ]
};

License

WTFPL

RELATED POST

10 Must-Know Windows Shortcuts That Will Save You Time

10 Must-Know Windows Shortcuts That Will Save You Time

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Arrays vs Linked Lists: Which is Better for Memory Management in Data Structures?

Navigating AWS Networking: Essential Hacks for Smooth Operation

Navigating AWS Networking: Essential Hacks for Smooth Operation

Achieving Stunning Visuals with Unity's Global Illumination

Achieving Stunning Visuals with Unity's Global Illumination

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code

Nim's Hidden Gems: Lesser-known Features for Writing Efficient Code