hmsk / frontmatter-markdown-loader

📝 Webpack Loader for: FrontMatter (.md) -> HTML + Attributes (+ React/Vue Component)

frontmatter-markdown-loader

Webpack Loader for Front Matter files (.md) which returns:

• Front Matter attributes
• Compiled markdown as HTML
• Compiled markdown as a React component
• Compiled markdown as a Vue component

This FrontMatter markdown file something.md:

---
subject: Hello
tags:
  - tag1
  - tag2
---
# Title

message

is loadable as:

import fm from "something.md"

fm.attributes // FrontMatter attributes => { subject: "Hello", tags: ["tag1", "tag2"] }
fm.html // Compiled markdown as HTML => "<h1>Title</h1>\n<p>message</p>\n"
fm.react // Component function for React which renders compiled markdown (Disabled as default)
fm.vue.component // Extendable component object for Vue which renders compiled markdown (Disabled as default)

📚 See the documentation for the further detail.

🔰 You have trouble with missing object?

The loader got the breaking changes in the latest major update. The article which you referred might premise on the old version. Check the installed version, if that says 1.x.y, see this guide.

Samples

• vue-cli app
• Nuxt.js
• NextJS (w/ Netlify CMS)

Inspired/Referred

• egoist/vmark: Convert markdown to Vue component.
• webpack-contrib/json-loader: json loader module for webpack

License

• MIT License Copyright 2018-present Kengo Hamasaki
• And thanks for Contributors