This package has been deprecated

Author message:

Further versions are released as 'vite-plugin-markdown'

vite-plugin-frontmatter-markdown

A plugin enables you to import a Markdown file as various formats on your vite project.

Setup

npx i -D vite-plugin-frontmatter-markdown

Config

const fmPlugin = require('vite-plugin-frontmatter-markdown')
 
module.exports = {
  plugins: [fmPlugin(options)]
}

Options

mode?: ('html' | 'toc' | 'react' | 'vue')[]
markdown?: (body: string) => string
markdownIt?: MarkdownIt | MarkdownIt.Options

Enum for mode is provided as Mode

import { Mode } from 'vite-plugin-frontmatter-markdown'
 
console.log(Mode.HTML) //=> 'html'
console.log(Mode.TOC) //=> 'toc'
console.log(Mode.REACT) //=> 'react'
console.log(Mode.VUE) //=> 'vue'

Mode examples:

Import Front Matter attributes

---
title: Awesome Title
description: Describe this awesome content
tags:
  - "great"
  - "awesome"
  - "rad"
---
 
# This is awesome
 
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

import { attributes } from './contents/the-doc.md';
 
console.log(attributes) //=> { title: 'Awesome Title', description: 'Describe this awesome content', tags: ['great', 'awesome', 'rad'] }

Import compiled HTML (Mode.HTML)

# This is awesome
 
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.

import { html } from './contents/the-doc.md';
 
console.log(html) //=> "<h1>This is awesome</h1><p>ite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.</p>"

Import ToC metadata (Mode.TOC)

# vite
 
Vite is an opinionated web dev build tool that serves your code via native ES Module imports during dev and bundles it with Rollup for production.
 
## Status
 
## Getting Started
 
# Notes

import { toc } from './contents/the-doc.md'
 
console.log(toc) //=> [{ level: '1', content: 'vite' }, { level: '2', content: 'Status' }, { level: '2', content: 'Getting Started' }, { level: '1', content: 'Notes' },]

Import as a React component (Mode.REACT)

import React from 'react'
import { ReactComponent } from './contents/the-doc.md'
 
function MyReactApp() {
  return (
    <div>
      <ReactComponent />
    </div>
}

Custom Element on a markdown file can be runnable as a React component as well

# This is awesome
 
Vite is <MyComponent type={'react'}>

import React from 'react'
import { ReactComponent } from './contents/the-doc.md'
import { MyComponent } from './my-component'
 
function MyReactApp() {
  return (
    <div>
      <ReactComponent my-component={MyComponent} />
    </div>
}

MyComponent on markdown perform as a React component.

Import as a Vue component (Mode.VUE)

<template>
  <article>
    <markdown-content />
  </article>
</template>
 
<script>
import { VueComponent } from './contents/the-doc.md'
 
export default {
  components: {
    MarkdownContent: VueComponent
  }
};
</script>

Custom Element on a markdown file can be runnable as a Vue component as well

# This is awesome
 
Vite is <MyComponent :type="'vue'">

<template>
  <article>
    <markdown-content />
  </article>
</template>
 
<script>
import { VueComponent } from './contents/the-doc.md'
import MyComponent from './my-component.vue'
 
export default {
  components: {
    MarkdownContent: {
      extends: VueComponent,
      components: { MyComponent }
    }
  }
};
</script>

MyComponent on markdown perform as a Vue component.

License

MIT