📝Convert markdown to Vue-component
Please consider starring the project to show your ❤️ and support.
You can use the @evillt/vuedown-loader for webpack loader You can use the parcel-plugin-vuedown for parcel plugin
vuedown is very similar to vmark, but with different tooling based on.
vuedown(8kb) is 4 times smaller than vmark(30kb), because vmark use saber-markdown(fork from markdown-it) while vuedown use marked(forked) under the hood.
@
in attribute names<router-link>
by default<a>
to <router-link>
yarn add vuedown --dev
In:
# {{ title }}
> I'm a markdown file
<button @click="inc">Count: {{ count }}</button>
<script>
export default {
data() {
return {
title: 'Hello',
count: 0
}
},
methods: {
inc() {
this.count++
}
}
}
</script>
Out:
<template>
<div class="vuedown">
<h1>{{ title }}</h1>
<p>
<blockquote>I'm a markdown file</blockquote>
</p>
<p>
<button @click="inc">Count: {{ count }}</button>
</p>
</div>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
count: 0
}
},
methods: {
inc() {
this.count++
}
}
}
</script>
Code:
const component = vuedown(input)
// Get the component in Vue SFC format
vuedown(input, [options])
input
string
true
The markdown string.
options
Options for marked.options.
options.routerLink
boolean
false
Convert <a>
to <router-link>
but external link will always be <a target="_blank">
.
options.wrapHTML
(html: string) => string
Wrap the HTML in an element.
options.extendMarkedRenderer
(renderer: marked.Renderer) => void
You can modify the marked renderer we use.
options.imageLazyLoading
boolean
Support chrome 75's native image lazy loading.
vuedown.marked: marked
git checkout -b my-new-feature
git commit -am 'Add some feature'
git push origin my-new-feature
vuedown © evillt, Released under the MIT License.
Authored and maintained by EVILLT with help from contributors (list).