Markdown Files to ALIVE Vue Components

Markdown Files to ALIVE Vue Components

Webpack loader for converting Markdown files to ALIVE Vue components.

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

Example

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

source: /example

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.
  • 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
    }
  }
}

Options

wrapper

String. Default: section

The wrapper of entire markdown content, can be HTML tag name or Vue component name.

markdown

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 ''
  }
}

plugins

Array.

Markdown-It plugins list. For example:

// ...
plugins: [
  // Without option
  require('markdown-it-plugin-1'),
  // With options
  [
    require('markdown-it-plugin-2'),
    {
      // ...
    }
  ]
]
// ...

rules

Object.

Markdown-It renderer rules. For example:

rules: {
  'table_open': () => '<div class="table-responsive"><table class="table">',
  'table_close': () => '</table></div>'
}

preProcess

Function. For example:

preProcess: function(source) {
  // do anything
  return source
}

process

Function. For example

// This is useful when used with front-matter-loader to set the page title in nuxt projects
process: function(source){
  let attrs = (source && source.attributes) || {}
  attrs.title = attrs.title || ""
  return {
    template: source.body,
    style: "",
    script: `export default {
      head(){
        return {
          title: '${attrs.title}'
        }
      }
    }`
  }
}

afterProcess

Function. For example:

afterProcess: function(result) {
  // do anything
  return result
}

live

Boolean. Default: true

Enable / Disable live detecting and assembling.

livePattern

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 (note that they must be unique to each other within the same page).

afterProcessLiveTemplate

Function. Default: null

Use this if you wish to change the live template manually after process (e.g. add wrappers). For example:

afterProcessLiveTemplate: function(template) {
  return `<div class="live-wrapper">${template}</div>`
}

Build Setup

# install dependencies
npm install

# serve example with hot reload at localhost:8888
npm run dev

# run all tests
npm test

Download Details:

Author: wxsms

Demo: https://vue-md-loader.wxsm.space/

Source Code: https://github.com/wxsms/vue-md-loader

vue vuejs javascript

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Vue Native is a framework to build cross platform native mobile apps using JavaScript

Vue Native is a framework to build cross platform native mobile apps using JavaScript. It is a wrapper around the APIs of React Native. So, with Vue Native, you can do everything that you can do with React Native. With Vue Native, you get

How to Make a Simple Vue Custom Select Component

In this article, you’ll learn how to build a Vue custom select component that can be easily be styled using your own CSS. In fact, it’s the same component that we use in production on Qvault, and you can see it in action on the playground.

Creating a Custom Tooltip Component in Vue

There are plenty of libraries out there that will have you up and running with a good tooltip solution in minutes. However, if you are like me, you are sick and tired of giant dependency trees that have the distinct possibility of breaking at any time.

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.