Vue Markdown Lite
A Lightweight markdown-it wrapper for Vue, inspired by vue-markdown.
Installation
NPM
$ npm install --save @earthtone/vue-markdown-liteGlobally 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.jswith the component exported in thewindow.VueMarkdownLiteobject.
<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.
[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>