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 which fills my niche demand for my original content management system.


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

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

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 option. The option expects a function takes Markdown body as an argument and returns compiled HTML.

Vue option

Also, if option is , like:

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

so, we can use them in your Vue component:

This component renders Markdown as HTML and workable .


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 , 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 ✨


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

Kengo Hamasaki / hmsk

Written by

Junior English Speaker at Indiegogo



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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade