https://github.com/hmsk/frontmatter-markdown-loader

📝 Webpack Loader for: FrontMatter (.md) -> HTML + Attributes (+ React/Vue Component)
https://github.com/hmsk/frontmatter-markdown-loader

frontmatter markdown react vue webpack-loader

Last synced: 14 days ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/hmsk/frontmatter-markdown-loader
• Owner: hmsk
• License: mit
• Created: 2018-03-20T10:24:50.000Z (over 6 years ago)
• Default Branch: main
• Last Pushed: 2024-10-11T15:16:39.000Z (about 1 month ago)
• Last Synced: 2024-10-11T15:44:58.334Z (about 1 month ago)
• Topics: frontmatter, markdown, react, vue, webpack-loader
• Language: JavaScript
• Homepage: https://hmsk.github.io/frontmatter-markdown-loader/
• Size: 5.95 MB
• Stars: 255
• Watchers: 4
• Forks: 18
• Open Issues: 25
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# frontmatter-markdown-loader

[![npm](https://img.shields.io/npm/v/frontmatter-markdown-loader.svg?style=for-the-badge)](https://www.npmjs.com/package/frontmatter-markdown-loader)

[![GitHub Workflow Status](https://img.shields.io/github/workflow/status/hmsk/frontmatter-markdown-loader/Node%20CI?style=for-the-badge)](https://github.com/hmsk/frontmatter-markdown-loader/actions?query=workflow%3A%22Node+CI%22)

Webpack Loader for [Front Matter](https://jekyllrb.com/docs/front-matter/) files (.md) which returns:

- Front Matter attributes

- Compiled markdown as HTML

- [Compiled markdown as a React component](https://hmsk.github.io/frontmatter-markdown-loader/react.html)

- [Compiled markdown as a Vue component](https://hmsk.github.io/frontmatter-markdown-loader/vue.html)

This FrontMatter markdown file `something.md`:

```md

---

subject: Hello

tags:

  - tag1

  - tag2

---

# Title

message

```

is loadable as:

```js

import fm from "something.md"

fm.attributes // FrontMatter attributes => { subject: "Hello", tags: ["tag1", "tag2"] }

fm.html // Compiled markdown as HTML => "
Title
\n
message
\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](https://hmsk.github.io/frontmatter-markdown-loader/) 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](https://hmsk.github.io/frontmatter-markdown-loader/migration).

## Samples

- [vue-cli app](https://github.com/hmsk/frontmatter-markdown-loader-vue-sample)

- [Nuxt.js](https://github.com/hmsk/frontmatter-markdown-loader-nuxt-sample)

- [NextJS (w/ Netlify CMS)](https://www.netlifycms.org/docs/nextjs/)

## Inspired/Referred

- [egoist/vmark: Convert markdown to Vue component.](https://github.com/egoist/vmark)

- [webpack-contrib/json-loader: json loader module for webpack](https://github.com/webpack-contrib/json-loader)

## License

- [MIT License](LICENSE) Copyright 2018-present Kengo Hamasaki

- And thanks for [Contributors](https://github.com/hmsk/frontmatter-markdown-loader/graphs/contributors)