Getting Started

Manual Installation

pnpm i vitepress-plugin-preview -D

Plugin Configuration

import { defineConfig } from 'vitepress';
import { vitepressPreviewPlugin } from 'vitepress-plugin-preview'; 

export default defineConfig({
  // other configs...
  markdown: { 
    config(md) { 
      md.use(vitepressPreviewPlugin, { 
        componentPath: 'demos', 
        prefix: 'demo', 
        shiki: { 
          langs: ['vue'] 
        } 
      }); 
    }, 
  }, 
});

Usage

:::demo component.vue
:::

Multiple Files

If your demo contains multiple files. You can put in a same directory and use :::demo to set the directory path. It will display all files in the directory and render index.vue.

docs
├─ guide
│  └─ start.md
└─ demos
   └─ base
      └─ index.vue
      └─ text.ts

<!-- start.md -->

:::demo base
:::