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.
• Hot reload.

Install

npm install vue-md-loader --save-dev
# or
yarn add vue-md-loader --dev

Usage

See README on Github: https://github.com/wxsms/vue-md-loader#readme.

Example

This page vue-md-loader.wxsm.space is generated by a markdown file.

source: https://github.com/wxsms/vue-md-loader/tree/master/example

Hello World!

Just testing...

Simple Code Block

<template>
  <div>Nothing happends</div>
</template>
<style scoped>
  div {
    color: green;
  }
</style>

Live 0

Live blocks without scripts & styles.

<template>
  <div>This <template>is</template> a Live block!</div>
</template>
<!-- live-0-0.vue -->

Another

<div>An other! This one got no template tag.</div>
<!-- live-0-1.vue -->

Live 1

A Vue live block with template & script & style

<template>
  <div id="test-block">This is a test block! {{msg}}</div>
</template>
<script>
  export default {
    data () {
      return {
        msg: 'Hello world!'
      }
    }
  }
</script>
<style>
  #test-block {
    color: #159957;
  }
</style>
<!-- live-1-0.vue -->

Another with same data as live-1-0.vue.

<template>
  <div class="cls1">{{msg}}</div>
</template>
<script>
  let a = 0
  export default {
    data () {
      return {
        msg: 'test test test'
      }
    }
  }
</script>
<style>
  .cls1 {
    color: white;
    background: #159957;
    padding: 10px;
  }
</style>
<!-- live-1-1.vue -->

Live 2

Live block with methods

<template>
  <section>
    <h1>Test title</h1>
    <p>count: {{count}}</p>
    <button type="button" @click="add">+1</button>
    <button type="button" @click="minus">-1</button>
  </section>
</template>
<script>
  let b = 'testing...'
  export default {
    data () {
      return {
        count: 0
      }
    },
    methods: {
      add () {
        this.count++ 
      },
      minus () {
        this.count--
      }
    }
  }
</script>
<!-- live-2.vue -->

Table Test

Table 1

Table 2