Description
🌟 vite-plugin-md2vue2 is a vite plugin for converting markdown files into vue2 render functions.
✅ Support hmr in development environment.
✅ Support custom markdown-it configurations.
✅ You can use vue-components in markdown files.
✅ You can also use markdown files as vue-components in vue files.
❗ If you use [email protected] or use markdown files as vue-components in vue files, you must install vite-plugin-vue2 before using vite-plugin-md2vue2.
Install
import { createVuePlugin } from ‘vite-plugin-vue2’
import { defineConfig } from ‘vite’
import md2Vue2Plugin from ‘vite-plugin-md2vue2’
export default defineConfig({
plugins: [md2Vue2Plugin(), createVuePlugin()]
})
// You can also set some markdown-it configurations.
import { createVuePlugin } from ‘vite-plugin-vue2’
import { defineConfig } from ‘vite’
import md2Vue2Plugin from ‘vite-plugin-md2vue2’
import emoji from ‘markdown-it-emoji’
export default defineConfig({
plugins: [
md2Vue2Plugin({
// https://markdown-it.docschina.org/
markdownItOptions: {
linkify: true,
typographer: true
},
markdownItPlugins: [emoji]
}),
createVuePlugin()
]
})
Params
markdownItOptions
Type: Object
Default: { html: true }
markdownItPlugins
Type: Array
Default: []
Usage in Vue
<div class="highlight highlight-text-html-basic position-relative overflow-auto" data-snippet-clipboard-copy-content="
<template>
<Test />
</template>
<script>
import Test from ‘@/markdown-files/test.md’
export default {
components: {
Test
}
}
</script>”>
<!– Convert markdown files into vue2 render functions –>
<template>
<Test />
</template>
<script>
import Test from ‘@/markdown-files/test.md’
export default {
components: {
Test
}
}
</script>