vite-plugin-md

Markdown for Vite

• Use Markdown as Vue components
• Use Vue components in Markdown

Install

Install

npm i vite-plugin-md -D # yarn add vite-plugin-md -D

Add it to vite.config.js

// vite.config.js
import Markdown from 'vite-plugin-md'

export default {
  plugins: [
    Markdown()
  ],
}

And import it as normal a Vue component

Import Markdown as Vue components

<template>
  <HelloWorld />
</template>

<script>
import HelloWorld from './README.md'

export default {
  components: {
    HelloWorld,
  },
}
</script>

Use Vue Components inside Markdown

You can even use Vue inside your markdown, for example

<Counter :init='5'/>

Note you need to register the components globally to use them in Markdown

import { createApp } from 'vue'
import App from './App.vue'
import Counter from './Counter.vue'

const app = createApp(App)

app.component('Counter', Counter) // <--

app.mount()

See integrations port if you don't want to explicitly register every component.

Options

vite-plugin-md uses markdown-it under the hood, see markdown-it's docs for more details

// vite.config.js
import Markdown from 'vite-plugin-md'

export default {
  plugins: [
    Markdown({
      // default options passed to markdown-it
      // see: https://markdown-it.github.io/markdown-it/
      markdownItOptions: {
        html: true,
        linkify: true,
        typographer: true,
      }
    })
  ],
}

Example

See the /example.

Or the pre-configured starter template Vitesse.

Integrations

Work with vite-plugin-voie

import Markdown from 'vite-plugin-md'
import Voie from 'vite-plugin-voie'

export default {
  plugins: [
    Voie({
      extensions: ['vue', 'md'],
    }),
    Markdown()
  ],
}

Put your markdown under ./src/pages/xx.md, then you can access the page via route /xx.

Work with vite-plugin-components

vite-plugin-components allows you to do on-demand components auto importing without worrying about registration.

import Markdown from 'vite-plugin-md'
import ViteComponents from 'vite-plugin-components'

export default {
  plugins: [
    Markdown(),
    // should be placed after `Markdown()`
    ViteComponents({
      // allow auto load markdown components under `./src/components/`
      extensions: ['vue', 'md'],

      // allow auto import and register components used in markdown
      customLoaderMatcher: ({ path }) => path.endsWith('.md'),
    })
  ],
}

Components under ./src/components can be directly used in markdown components, and markdown components can also be put under ./src/components to be auto imported.

License

MIT License © 2020 Anthony Fu