vite-plugin-vuedoc

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

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

yarn add vite-plugin-vuedoc

// vite.config.ts
import vitePluginVuedoc, { vueDocFiles } from 'vite-plugin-vuedoc'
import vue from '@vitejs/plugin-vue'

const config: UserConfig = {
  plugins: [
    vitePluginVuedoc(), // 1. Must be loaded before @vitejs/plugin-vue
    vue({
      include: [...vueDocFiles] // 2. Must include .md | .vd files
    })
  ]
}

export 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

import MdComp from './docs/Button.zh-CN.md'
export const router = createRouter({
  routes: [
    { path: '/home', redirect: '/' },
    {
      path: '/button',
      name: 'button',
      component: MdComp
    }
  ]
})

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'
---

import MdComp from './docs/Button.zh-CN.md'

const { matter, toc } = MdComp.$vd
console.log(matter)
console.log(toc)
// matter: {wrapperClass, title, desc}
// toc: [{content: string; anchor: string; level: number},{content: string; anchor: string; level: number}]

Custom Preview Component

// vite.config.ts
import vitePluginVuedoc from 'vite-plugin-vuedoc'

const config: UserConfig = {
  plugins: [
    vitePluginVuedoc({
      previewComponent: 'myDemoPreview'
    })
  ]
}

export default config

register your components in you vite app

app.component('myDemoPreview', myDemoPreview)

myDemoPreview

<template>
  <slot /> <!-- Demo Component -->
  <slot name="code" /> <!-- code block html -->
</template>
<script>
export defalut {
  props:{
    lang: String,
    theme: String
  }
}
</script>

Markdown Screenshots

Preview Screenshots

vue javascript