Webpack loader for converting Markdown files to Vue components.
- Configurable Markdown-It parser.
- Built-in syntax highlighter with highlightjs.
- Live demo support. Extremely useful for document examples.
- Hot reload.
NPM:
npm install vue-md-loader --save-dev
Yarn:
yarn add vue-md-loader --dev
Simply use vue-md-loader
to load .md
files and chain it with your vue-loader
.
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.md$/,
loader: 'vue-loader!vue-md-loader'
}
]
}
}
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.md$/,
loaders: [
'vue-loader',
{
loader: 'vue-md-loader',
options: {
// your preferred options
}
}
]
}
]
}
}
A live demo is:
<template>
<div class="cls">{{msg}}</div>
</template>
<script>
export default {
data () {
return {
msg: 'Hello world!'
}
}
}
</script>
<style>
.cls {
color: red;
background: green;
}
</style>
<!-- some-live-demo.vue -->
becomes something like:
<some-live-demo/>
<pre><code>...</code></pre>
A Vue component with all it's <template>
, <script>
and <style>
settled will be inserted before it's source code block.
Multiple lives inside a single markdown file is supported by:
- All
<script>
from different code blocks:- code inside
export default
will be extract into it's own Vue component with no conflicts. - code before
export default
will be extract into the same top-level component.
- code inside
- All
<style>
from different code blocks will be extract into the same top-level component.
Note:
- Loader will treat the entire block as template if no
<template>
found in live block. - You will need runtime + compiler build of Vue.js for this feature. For example:
module.exports = {
// ...
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
}
}
}
String. Default: section
The wrapper of entire markdown content, can be HTML tag name or Vue component name.
Object.
Markdown-It options. Default:
{
html: true,
highlight: function (str, lang) {
if (lang && hljs.getLanguage(lang)) {
try {
return hljs.highlight(lang, str).value
} catch (__) {}
}
return ''
}
}
Array.
Markdown-It plugins list. For example:
// ...
plugins: [
// Without option
require('markdown-it-plugin-1'),
// With options
[
require('markdown-it-plugin-2'),
{
// ...
}
]
]
// ...
Object.
Markdown-It renderer rules. For example:
rules: {
'table_open': () => '<div class="table-responsive"><table class="table">',
'table_close': () => '</table></div>'
}
Boolean. Default: true
Enable / Disable live detecting and assembling.
Regex. Default: /<!--[\s]*?([-\w]+?).vue[\s]*?-->/i
A code block with livePattern
inside itself becomes a live block. The matched body will become the live Vue component's name and reference.
Function. Default: null
Use this if you wish to change the live template manually (e.g. add wrappers). For example:
function wrapIt (template) {
return `<div class="live-wrapper">${template}</div>`
}
# install dependencies
npm install
# serve example with hot reload at localhost:8888
npm run dev
# run all tests
npm test
MIT