vitepress-plugin-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

• @karry-design/vitepress-plugin-demo-component

⚙️ Installation

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

⚡ Usage

configure in your vitepress/theme entry file

import { AntDesignContainer, ElementPlusContainer, NaiveUIContainer } 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)
    }
  }
})

Preview of Component Form

### Single-line

<Preview path="./components/ComponentPreview.vue" title="Component Preview"></Preview>

### Multi-line

<Preview 
  path="./components/ComponentPreview.vue" 
  title="Component Preview" 
></Preview>

### Multi-line Description

<Preview 
  path="./components/ComponentPreview.vue" 
  title="Component Preview" 
  description="Preview By Component Form"
>
  <template #description>
    <h1>this is slot data</h1>
    <h2> level</h2>
  </template>
</Preview>

### Single-line Description

<Preview path="./components/ComponentPreview.vue" title="Component Preview" description="Preview By Component Form"></Preview>

📑 License