vue-template-anchor
markdown file to vue component loader.
Last updated 3 years ago by tsxuehu .
WTFPL · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-template-anchor 
SYNC missed versions from official npm registry.

vue-markdown-loader

Convert Markdown file to Vue Component using markdown-it.

Supports both Vue 1.x and 2.0

Example

https://github.com/mint-ui/docs

Demo

Youku Video

Installation

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: {
    loaders: [{
      test: /\.md/,
      loader: 'vue-markdown-loader'
    }]
  }
};

Options

reference markdown-it

{
  vueMarkdown: {
    // 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: {
    loaders: [{
      test: /\.md/,
      loader: 'vue-markdown-loader'
    }]
  },

  vueMarkdown: markdown
};

webpack 2.x

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

Note

Resource references can only use absolute path

e.g.

webpack config

resolve: {
  alias: {
    src: __dirname + '/src'
  }
}

It'is work

<img src="~src/images/abc.png">

<script>
  import Image from 'src/images/logo.png'
  import Hello from 'src/components/hello.vue'

  module.exports = {
  }
</script>

Incorrect

<img src="../images/abc.png">

<script>
  import Image from '../images/logo.png'
  import Hello from './hello.vue'
  module.exports = {
  }
</script>

License

WTFPL

Current Tags

  • 0.6.2                                ...           latest (3 years ago)

2 Versions

  • 0.6.2                                ...           3 years ago
  • 1.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 3
Dependencies (9)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |