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 😉

Published frontmatter-markdown-loader module on npmjs.com which fills my niche demand for my original content management system.

frontmatter-markdown-loader

The module provides the loader for Webpack which can load Front Matter-ed Markdown. Basic feature is totally same to frontmatter-loader + json-loader as I write in the previous article.

With just configuring this loader, you can load Font Matter-ed Markdown like:

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

Additionally, the module has other features.

Markdown option

For Markdown, we can choose the markdown compiler as we like. In loader’s configuration, we can give markdown option. The option expects a function takes Markdown body as an argument and returns compiled HTML.

const md = require('markdown-it')

...

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

Vue option

Also, if vue option is true, like:

{
test: /\.md$/,
loader: 'frontmatter-markdown-loader'
options: {
vue: true
}
}

Then loader returns functions by compiled template as string render, staticRenderFns which are Vue component requires.

import { render, staticRenderFns } from "something.md"

so, we can use them in your Vue component:

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)();
}
}

This component renders Markdown as HTML and workable <other-component>.

Vmark

Egoist whom I respect in the Vue community commented about Vmark to my article for the dynamic compilation of Vue template which is written as Markdown.

Vmark is the powerful tool. We can write Markdown for creating Vue component. However, that was different from what I need. I wanted some content writers to write Front Matter-ed Markdown including custom element which works Vue component. I provide some handy components for rendering special things with only writing custom element. e.g. If the content writer put <video-player filename="foo.mp4" /> , then my CMS renders the video player.

Vamrk could do this and I might propose as a feature, but main purpose of Vmark seemed “Writing Vue component using Markdown”, so I decided to make as another module just for me.

Mostly codes of my module are referred Vmark anyway (Thanks!). I learned a bit about what vue-template-compiler does 😉 At all, I could remove runtime compiler from my first try as Egoist commented ✨

Hai-iro

A Japanese duo by a product designer and a software…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store