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

Component Preview Configuration

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

Internationalization Configuration

The plugin supports configuring internationalization options through the defineClientComponentConfig function:

// .vitepress/theme/index.ts
import { defineClientComponentConfig } from '@vitepress-demo-preview/core';

// Define internationalization configuration
defineClientComponentConfig({
  vueApp: app,
  // Internationalization configuration
  i18n: {
    zh: {
      copySuccessText: '代码已复制到剪贴板！',
      copyCode: 'Copy code',
      foldCode: 'Fold code',
      expandCode: 'Expand code',
      hideSourceCode: 'Hide source code',
    },
    en: {
      copySuccessText: 'Code copied to clipboard!',
      copyCode: '复制代码',
      foldCode: '折叠代码',
      expandCode: '展开代码',
      hideSourceCode: '隐藏源代码',
    },
  },
  // Set default language
  defaultLanguage: 'en',
});

Global Configuration Options

Option	Type	Default	Description
copySuccessText	string	'复制成功'	The text shown when code is successfully copied (deprecated, use i18n instead)
i18n	object	undefined	Internationalization configuration object
defaultLanguage	string	'zh'	Default language when no locale is detected
vueApp	App	undefined	Vue application instance

Supported i18n Text Keys

Key	Description
copySuccessText	Text shown on successful code copy
copyCode	Tooltip text for copy button
foldCode	Tooltip text for fold button
expandCode	Tooltip text for expand button
hideSourceCode	Text for hide source code button

The plugin automatically detects the current language based on the URL path and displays the corresponding text.