vitepress-demo-preview

Demo of Vue SFC components in vitepress

🎉Introduce

We can see their component display and code example display from some excellent UI component libraries such as element-plus and Ant Design Vue

This project is based on vitepress and markdown-it implementation to display components and code examples in documents. Using this plug-in, Vue SFC components can be displayed in static documents

🏄‍♂️ Packages

Package	Version (click for changelogs)
@vitepress-demo-preview/component
@vitepress-demo-preview/plugin

🔥Installation

pnpm add @vitepress-demo-preview/component @vitepress-demo-preview/plugin

⚡Usage

configure in your vitepress/theme entry file

import { AntDesignContainer } from '@vitepress-demo-preview/component'
import '@vitepress-demo-preview/component/dist/style.css'

export default {
  ...DefaultTheme,
  enhanceApp({ app }: { app: App }) {
    app.component('demo-preview', AntDesignContainer)
  }
}

configure markdown to add plugin

import { defineConfig } from 'vitepress'
import { containerPreview, componentPreview } from '@vitepress-demo-preview/plugin'

export default defineConfig({
  markdown: {
    config(md) {
      md.use(containerPreview)
      md.use(componentPreview)
    }
  }v
})

Preview of Component Form

<preview path="./xxx/xx.vue" title="title" description="component description content"></preview>

Preview by Container Form

:::preview title || component description content

demo-preview=./xxx/xx.vue

:::

👊 TODO

Integration demo component of other UI frameworks
- Ant Design Container
- ElementPlus Container
- Naive UI Container

supbose/vitepress-demo-preview