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

Preview of Component Form

configure in your vitepress/theme entry file

import DemoPreview from '@vitepress-demo-preview/component'
import '@vitepress-demo-preview/component/dist/style.css'

export default {
  ...DefaultTheme,
  enhanceApp({ app }: { app: App }) {
    app.use(DemoPreview)
  }
}

configure markdown to add plugin

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

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

use in markdown file

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

Preview by Container Form

configure in your vitepress/theme entry file

import DemoPreview from '@vitepress-demo-preview/component'
import '@vitepress-demo-preview/component/dist/style.css'

export default {
  ...DefaultTheme,
  enhanceApp({ app }: { app: App }) {
    app.use(DemoPreview)
  }
}

configure markdown to add plugin

import { defineConfig } from 'vitepress'
import { containerPreview } from 'vitepress-demo-preview-plugin'

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

use in markdown file

:::preview title || component description content

demo-preview=./xxx/xx.vue

:::