@earthtone/vue-markdown-lite

v0.2.3

Published

3 years ago

Light weight Markdownit Wrapper Vue Component

Downloads

598

0High
0Medium
0Low

earthtone

Vue Markdown Lite

Travis CI Status

A Lightweight markdown-it wrapper for Vue, inspired by vue-markdown.

Installation

NPM

$ npm install --save @earthtone/vue-markdown-lite

Globally Registered Component

import VueMarkdownLite from '@earthtone/vue-markdown-lite'
import App from './App.vue'

Vue.use(VueMarkdwonLite)

new Vue({
  el: '#app',
  render: h => h(App)
})

Both ESModules and CommonJS syntax are supported for importing.

CommonJS

const VueMarkdownLite = require('@earthtone/vue-markdown-lite')

ESModule

import VueMarkdownLite from '@earthtone/vue-markdown-lite'

Browser globals

The dist folder contains vue-markdown-lite.min.js with the component exported in the window.VueMarkdownLite object.

  <body>
    <vue-markdown-lite>i am a **test**.</vue-markdown-lite>
  </body>
  <script src="path/to/vue.js"></script>
  <script src="path/to/vue-markdown-lite.js"></script>
  <script>
    Vue.use(VueMarkdownLite);
    var vm = new Vue({
      el: "body"
    });
  </script>

Single File Component

Single File Components (SFCs) are also importable for use in individual components as described in this guide.

<template>
  <vue-markdown-lite>
    # Hey You Guys!
  </vue-markdown-lite>
</template>

<script>
  import VueMarkdownLite from '@earthtone/vue-markdown-lite/sfc'
  export default {
    components: {
      VueMarkdownLite
    }
  }
</script>

Usage

Stick some markdown in the between the opening/closing vue-markdown-lite brackets!

<template>
  <vue-markdown-lite>
# Hello Markdown!

## This is some generic markdown

- this
- is a
- list
- of a
- few
- items

> This is a quotation, which is a noun, but not a quote, which is a verb.

![image alt](/path/to/image.png)

[link text](/path/to/link/url)
  </vue-markdown-lite>
</template>

Slots

<vue-markdown-lite>this is the default slot</vue-markdown-lite>

After setting up the middleware in your vue component above, using the embedded markdown is as easy as writing it between the vue-markdown-lite tags.

VueMarkdownLite has a default slot which is used to write the markdown source. The default slot only renders once at the beginning, and it will overwrite the prop of source!

Plugins

By default, the vue-markdown-lite component implements the most limited use case with no additional feature support. It does support loading optional markdown-it plugins as component props.

The expected prop type is an Array of Arrays, containing a reference to the imported plugin module, and any options or arguments the plugin takes.

<vue-markdown-lite :plugins="mdPlugins">
  # Foo Bar

  ::: warning
  * here be dragons *
  :::
</vue-markdown-lite>

import namedHeaders from 'markdown-it-named-headings'
import customContainers from 'markdown-it-container'

export default {
  name: 'parent-component',
  data () {
    return {
      mdPlugins: [
        [ namedHeaders ],
        [ customContainers, 'warning' ]
      ]
    }
  }
}

The above template and script blocks will yield the following output:

<article>
  <h1 id="foo-bar">Foo Bar</h1>
  <div class="warning">
    <p><em>here be dragons</em></p>
  </div>
</article>

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme