Compile Front Matter Markdown as Vue template

Front Matter Markdown has custom-element for Vue.js

(09/01/2019) Some options and usages are deprecated as I’m updating the module with the breaking changes. Hope you check the latest documentation 😉

frontmatter-markdown-loader

import { attributes, html } from "something.md"

Markdown option

const md = require('markdown-it')

...

{
test: /\.md$/,
loader: 'frontmatter-markdown-loader'
options: {
markdown: (body) => {
return md.render(body)
}
}
}

Vue option

{
test: /\.md$/,
loader: 'frontmatter-markdown-loader'
options: {
vue: true
}
}
import { render, staticRenderFns } from "something.md"
import OtherComponent from "OtherComponent.vue"

export default {
data: {
templateRender: null
},

components: {
OtherComponent // If markdown has `<other-component>` in body, will work :)
}

render: function (createElement) {
return this.templateRender ? this.templateRender() : createElement("div", "Rendering");
},

created: function () {
this.templateRender = new Function(fm.vue.render)();
this.$options.staticRenderFns = new Function(fm.vue.staticRenderFns)();
}
}

Vmark

Hai-iro

A Japanese duo by a product designer and a software…

Hai-iro

A Japanese duo by a product designer and a software engineer in San Francisco.

Kengo Hamasaki / hmsk

Written by

Junior Homebrewer

Hai-iro

A Japanese duo by a product designer and a software engineer in San Francisco.