@chiaweilee/vue-markdown-loader

markdown file to vue component loader.

Usage no npm install needed!

<script type="module">
  import chiaweileeVueMarkdownLoader from 'https://cdn.skypack.dev/@chiaweilee/vue-markdown-loader';
</script>

README

@chiaweilee/vue-markdown-loader

Downloads Version License

Intro

a fork of @QingWei-Li/vue-markdown-loader

support:

  • vue template
  • custom wrapper
  • style, script mixin
  • vue-i18n
  • vue-i18n-loader
  • vue-i18n-filter

for safety, we do not support style and script writing in .md file. use mixin instead.

Demo

See @chiaweilee/vue-markdown-docs

Install

npm install @chiaweilee/vue-markdown-loader

Usage

Vue-cli 3.x

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('md')
      .test(/\.md$/)
      .use('vue-loader')
      .loader('vue-loader')
      .end()
      .use('@chiaweilee/vue-markdown-loader')
      .loader('@chiaweilee/vue-markdown-loader')
      .options({
        // options
      })
  }
}

vue.config.js of @chiaweilee/vue-markdown-docs

Options

  • wrapper

tag of root wrapper for .md, default: section, type: String

{ wrapper: 'div' }
  • scriptMixin

mixin script into every .md, option, type: String

import test from './test'
export default {
    mounted () {
        test()
    }
}
  • scriptStyle

mixin style into every .md, option, type: String

.wrapper { color: red }
  • customTagMixin

mixin custom tag into every .md, option, type: String

custom tag will inject before scriptMixin and scriptStyle

<style scope>.wrapper { color: red }</style>
<script>
import test from './test'
export default {
    mounted () {
        test()
    }
}
</script>

loader option of @chiaweilee/vue-markdown-docs