vite-vue-md

This Vite plugin adds support for importing a Markdown file as a Vue component. Works with Vue 2 & 3.

$3

Render your Vue.js code blocks inline by simply adding demo next to the language name.

For example, when this Markdown file is rendered with this plugin, you'll see a clickable button here:
``vue demo



`

Install

`
npm install -D vite-vue-md
`

Setup

In your vite.config.js file:

1. Import vite-vue-md and add it to the plugins array.
2. In your vue() plugin options, add a include option that includes .md files.

_vite.config.js_:
`diff
import vue from '@vitejs/plugin-vue'
+ import vueMd from 'vite-vue-md'

export default {
plugins: [
// ...

vue({
+ include: [/\.vue$/, /\.md$/] // ← Treat MD files as Vue components
}),

+ vueMd(/ Options /) // ← Compile MD files to Vue components
]
// ...
}
`

Demo Blocks

_Demo Blocks_ are Vue.js code blocks that are rendered inline. They're useful for documentation docs to show off your components without compromising the readability of the Markdown file on GitHub.


To compile a Vue.js codeblock as a _Demo Block_, add demo next to the language name:
``
`vue demo



`
``

$3

The entry point for demo blocks must be a Vue.js component. But you can import other code blocks in any language from the same Markdown file.

For non-entry files, set a file name via demo=. Then import it from the Vue.js demo block via the doc: protocol:

``markdown
Entry file:
`vue demo



`

Second file:
`js demo=click-handler.js
export const clickHandler = () => alert('Clicked!')
`
``

$3

Since the code blocks are rendered inline, they're replaced by the actual Vue.js component. To show the code block, you can add a onDemo callback to the plugin options:

`ts
({
onDemo(componentTag, code) {
// Register the wrapper component
this.registerComponent('DemoContainer', './DemoContainer.vue')

// Return a custom HTML string
return


${componentTag}


}
})
`

Options

$3


Type: ReadonlyArray | string | RegExp

Files to include from being compiled as Vue files.

$3

Type: ReadonlyArray | string | RegExp

Files to exclude from being compiled as Vue files.

$3

Type: markdownIt.Options

MarkdownIt options. See MarkdownIt's documentation for more information.

$3

Type: (md: markdownIt) => void;

Callback to add plugins to MarkdownIt.

$3

Type: string

Default: markdown-body

The class to add to the wrapper element that contains the Markdown page.

$3

Type:
`ts
(
tag: string,
code: string,
demos: Map
) => string
`

You can intercept each demo block and return a custom HTML string. This is useful for adding custom styling to demo blocks.

In addition, there are utils exposed in the this context:
- escapeHtml: Escape HTML code to prevent it from being rendered as HTML.
- registerComponent: Register a component to be used in the demo block. This is useful for registering components that are imported from other files.

See example above in the _Demo Blocks_ section.

$3

Type: string

File path to a stylesheet to use for the Markdown page. This will be added using