vite-plugin-md2vue
v1.1.1
Published
vite plugin to transform markdown to vue
Downloads
26
Readme
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 -D
Use
// 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
// ...
//```