README
vue-md-loader
Introduction
Webpack loader for converting Markdown files to ALIVE Vue components.
- Configurable Markdown-It parser.
- Built-in syntax highlighter with highlightjs.
- ✨Live demo✨ support. Extremely useful for document examples.
- Vue 3 & vue-cli usage support.
- Hot reload.
Example
This page (vue-md-loader.wxsm.space) is generated by a markdown file. Source: /example.
There is also a Vue 3 & Vue-cli example: /example-vue3.
Install
NPM:
npm install vue-md-loader --save-dev
Yarn:
yarn add vue-md-loader --dev
Usage
Basic
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'
}
]
}
}
Note that to get code highlighting to work, you need to:
- include one of the highlight.js css files into your project, for example:
highlight.js/styles/github-gist.css
. - specify a lang in code block. ref: creating and highlighting code blocks.
With Options
module.exports = {
// ...
module: {
rules: [
// ...
{
test: /\.md$/,
loaders: [
'vue-loader',
{
loader: 'vue-md-loader',
options: {
// your preferred options
}
}
]
}
]
}
}
✨ Markdown Alive!
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