VitePress Component Preview Plugin

VitePress Demo Preview is a powerful component preview plugin that allows you to showcase and preview Vue components in VitePress documentation. This plugin provides multiple UI framework preview forms, including Naive UI, Ant Design Vue, and Element Plus.

Usage

VitePress Demo Preview provides two usage methods: component form and custom container form.

Method 1: Component Form Preview

Use the <preview> component to quickly preview components. This method is suitable for simple component displays.

<preview
  path="@/components/ComponentPreview.vue"
  title="Component Title"
  description="Component description information"
/>

Actual Effect:

Component Preview

Preview example component through component form

<template>
  <div class="component-preview">
    <p>Component Form</p>
    <div>
      <span>新增：{{ num }}</span>
      <button @click="addNum">按钮</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const num = ref(0);
const addNum = () => {
  num.value += 2;
};
</script>

<style scoped>
.component-preview > p {
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  font-size: 20px;
}

button {
  display: inline-block;
  padding: 0px 16px;
  border-radius: 4px;
  background: var(--vp-button-brand-bg);
  color: var(--vp-button-brand-text);
  border: 1px solid var(--vp-button-brand-border);
  margin-left: 40px;
}
</style>

Method 2: Custom Container Form Preview

Using the custom container :::preview provides a more flexible preview method, suitable for situations that require more configuration.

:::preview Container Title || Container description information

demo-preview=@/components/ContainerPreview.vue

:::

Actual Effect:

Container Preview

Preview example component through custom container form

<template>
  <div class="container-preview">
    <p>Container Form</p>
    <div>
      <span>新增：{{ num }}</span>
      <button @click="addNum">按钮</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const num = ref(0);
const addNum = () => {
  num.value += 2;
};
</script>

<style scoped>
.container-preview > p {
  margin: 0;
  padding: 0;
  margin-bottom: 10px;
  font-size: 20px;
}

button {
  display: inline-block;
  padding: 0px 16px;
  border-radius: 4px;
  background: var(--vp-button-brand-bg);
  color: var(--vp-button-brand-text);
  border: 1px solid var(--vp-button-brand-border);
  margin-left: 40px;
}
</style>

Method 3: Preview TSX Components

This plugin also supports previewing TSX components, with usage similar to Vue components.

:::preview Container Title || Container description information

demo-preview=./components/ContainerTsxPreview.tsx

:::

Actual Effect:

TSX Component Preview

Preview TSX example component through custom container form

import { defineComponent, ref } from 'vue';
import './ContainerTsxPreview.css';

export default defineComponent({
  setup() {
    const num = ref(0);
    const addNum = () => {
      num.value += 2;
    };
    return () => (
      <>
        <div class="container-preview">
          <p>Container Form</p>
          <div>
            <span>Count: {num.value}</span>
            <button onClick={addNum} class="btn">
              Button
            </button>
          </div>
        </div>
      </>
    );
  },
});

Features

• 📦 Support for multiple UI frameworks: Naive UI, Ant Design Vue, Element Plus
• 🔍 Code collapse/expand functionality
• 📋 One-click code copying
• 🌈 Beautiful display interface
• 🚀 Support for Vue and TSX components
• 💡 Detailed documentation

Configuration Options

Parameter	Description	Type	Default Value
path/demo-preview	Component path	string	-
title	Component title	string	'Default Title'
description	Component desc	string	'Description'