vite-plugin-vue-preview

简体中文

A Vite plugin made for previewing and editing Vue components in Markdown and, of course, exporting a VuePreview component to be used directly in Vue applications.

Demo

Install

1pnpm add vite-plugin-vue-preview@1

Features

• Support for Vue/Vitepress applications
• Support code preview
• Support online editing

Props

VuePreview

1interface Props {
2  // Initialization code string
3  code: string
4  // Whether to collapse the code when the component is mounted
5  collapse: boolean
6  // Whether to turn on ssr
7  ssr: boolean
8  // Whether the incoming props string is encoded by encodeURIComponent (necessary mainly in vitepress)
9  encode: boolean
10  // The body style in the iframe element
11  previewBodyStyle: Partial<CSSStyleDeclaration> | string
12  // Styling of the root component in the iframe element
13  previewAppStyle?: Partial<CSSStyleDeclaration> | string
14  // Third-party dependencies (CDN) that can be introduced by the demo component
15  importMap?: Record<string, string> | string
16}

CSS Styles

1/* VuePreview border-radius */
2--vue-preview-radius
3/* VuePreview border-color */
4--vue-preview-color-border
5/* VuePreview box-shadow */
6--vue-preview-box-shadow
7/* VuePreview color */
8--vue-preview-color-icon
9/* VuePreview hover:color */
10--vue-preview-color-icon-bg-hover
11/* VuePreview background-color of loading model */
12--vue-preview-color-model-bg
13/* VuePreview color of loading icon */
14--vue-preview-color-loading

Usage

Vue

Import the VuePreview component and style

1import { createApp } from 'vue'
2import { VuePreview } from 'vite-plugin-vue-preview'
3import 'vite-plugin-vue-preview/style.css'
4
5const app = createApp()
6
7app.component('VuePreview', VuePreview)

Vitepress

Import the VuePreview component / style and plugin

1// vite.config.ts
2import { defineConfig } from 'vite'
3import { VuePreviewPlugin } from 'vite-plugin-vue-preview'
4
5
6export default defineConfig({
7  plugins: [VuePreviewPlugin()],
8})
9
10// .vitepress/theme/index.ts
11import DefaultTheme from 'vitepress/theme'
12import { VuePreview } from 'vite-plugin-vue-preview'
13import 'vite-plugin-vue-preview/style.css'
14
15export default {
16  ...DefaultTheme,
17  enhanceApp(ctx) {
18    DefaultTheme.enhanceApp(ctx)
19    ctx.app.component('VuePreview', VuePreview)
20  },
21}

Once you've set up the above, you're ready to use it in your markdown file:

  
```vue preview
<template>
  <h1>Demo: vite-plugin-vue-preview</h1>
</template>
```
  

Plugin Configuration

There is no elegant way to pass component Props in a MarkDown file, so passing in specific component Props is supported in the plugin configuration for global configuration

1// vite.config.ts
2import { defineConfig } from 'vite'
3import { vuePreviewPlugin } from 'vite-plugin-vue-preview'
4
5export default defineConfig({
6  plugins: [vuePreviewPlugin({
7    props: {
8      previewBodyStyle: {
9        display: 'flex',
10        justifyContent: 'center',
11        alignItems: 'center',
12      },
13      previewAppStyle: {
14        display: 'flex',
15        justifyContent: 'center',
16        alignItems: 'center',
17        flexDirection: 'column',
18      },
19      importMap: {
20        '@vue/shared': 'https://unpkg.com/@vue/shared@latest/dist/shared.esm-bundler.js',
21      },
22    },
23  })],
24})