Javascript Vue

A vite plugin for converting markdown files into vue2 render functions1 min read

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

yarn add vite-plugin-md2vue2 vue-template-compiler vue-template-es2015-compiler markdown-it

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>

Usage in Markdown

### I can use vue component in markdown

<CustomGlobalComponent :data=hello world>

perfect!!!

Usage in Vue-Router

import VueRouter from ‘vue-router’
import Vue from ‘vue’
import Test from ‘@/markdown-files/test.md’

Vue.use(VueRouter)

export default new VueRouter({
routes: {
path: ‘/’,
component: Test
}
})

GitHub

View Github

Leave a Reply

Your email address will not be published.

Pin It on Pinterest