1.1.1 • Published 3 years ago
vite-plugin-md2vue v1.1.1
vite-plugin-md2vue
Introduction
vite plugin, import markdown module as vue3 component. Note that this plugin only supports vue3!
Install
npm i vite-plugin-md2vue --save-dev
yarn add vite-plugin-md2vue -DUse
// vite.config.js
import { defineConfig } from "vite";
import vitePluginMd2Vue from "vite-plugin-md2vue";
export default defineConfig({
...
plugins: [vue(), vitePluginMd2Vue()]
});// xx.vue
<template>
<Start />
</template>
<script>
import { defineComponent } from 'vue'
import Start, { headings, codeBlocks } from 'docs/start.md'
export default defineComponent({
name: 'App',
components: {
Start
},
})
</script>module exports
| name | describe | type |
|---|---|---|
| default | vue component | |
| headings | markdown headings list | {text:string, level: number, raw: string}[] |
| codeBlocks | markdown code block list | {code: string, infostring: string}[] |
Options
| name | type | describe |
|---|---|---|
| renderWrapperClass | string | as outer container's class attribute |
| markedOptions | object | marked's setOptions config |
| markedRender | object | marked's render config |
| mermaidLoadingHtml | string | mermaid loading before rendered, to replace default loading, html must contain mermaid-loading as class attribute |
mermaid
You can create diagrams and visualizations using Mermaid. You need to add mermaid as code block language.
//```mermaid
// mermaid code here
// ...
//```