vite-plugin-vuedoc

• Use Markdown as Vue components
• Use Markdown Code Block as Preview components
• Support vite 2

vite 1.X

vite 1 use vite-plugin-vuedoc 2.0 [https://github.com/JasKang/vite-plugin-vuedoc/tree/2.0.0]

Feature

• markdown components
  • matter
  • toc
  • plugins
• vue code block
  • vue preview
  • code import
  • customizing the preview component
  • sourcemap
• code highlight
  • theme
• playground
• hmr
• tests

Used

• Elenext: elenext.vercel.app

Install

1yarn add vite-plugin-vuedoc

1// vite.config.ts
2import vitePluginVuedoc from 'vite-plugin-vuedoc'
3import vue from '@vitejs/plugin-vue'
4
5const config: UserConfig = {
6  plugins: [vitePluginVuedoc(), vue()]
7}
8
9export default config

import style

import 'vite-plugin-vuedoc/style.css'

VueDocPluginOptions

• wrapperClass: string

  The classname of the wrapped markdown component

• previewClass: string

  The classname of the wrapped preview component

• previewComponent: string

  The name of the custom preview component you want to use

• markdownIt:
  • plugins: any[]

    markdownIt plugins

• highlight:
  • theme: 'one-dark' | 'one-light' | string

    highlight theme. defalut: one-dark

import markdown

1import MdComp from './docs/Button.zh-CN.md'
2export const router = createRouter({
3  routes: [
4    { path: '/home', redirect: '/' },
5    {
6      path: '/button',
7      name: 'button',
8      component: MdComp
9    }
10  ]
11})

VueBlock preview

when the vue code block has a demo tag， it can preview the component

```vue demo

```

code block import

in code block support import file like this:

```vue demo src="./test.vue"

```

```typescript src="./test.ts"

```

Frontmatter & Toc

// Button.zh-CN.md
---
wrapperClass: '' // wrapperClass will wrapped current md file
title: 'title'
desc: 'desc'
---

1import MdComp from './docs/Button.zh-CN.md'
2
3const { matter, toc } = MdComp.$vd
4console.log(matter)
5console.log(toc)
6// matter: {wrapperClass, title, desc}
7// toc: [{content: string; anchor: string; level: number},{content: string; anchor: string; level: number}]

Custom Preview Component

1// vite.config.ts
2import vitePluginVuedoc from 'vite-plugin-vuedoc'
3
4const config: UserConfig = {
5  plugins: [
6    vitePluginVuedoc({
7      previewComponent: 'myDemoPreview'
8    })
9  ]
10}
11
12export default config

register your components in you vite app

app.component('myDemoPreview', myDemoPreview)

myDemoPreview

1<template>
2  <slot> -> // Demo Component
3  <slot name="code"> -> // code block html
4</template>
5<script>
6export defalut {
7  prop:{
8    lang: String
9    theme: String
10  }
11}
12</script>

Markdown Screenshots

Preview Screenshots

vue javascript