vite-plugin-vue-component-preview

This Vite plugin support <preview lang="md"> custom block in SFC for preview single Vue component.

To use this with VSCode + Volar, see https://github.com/johnsoncodehk/volar/discussions/1511

Setup

vite.config.ts

1import { defineConfig } from 'vite';
2import vue from '@vitejs/plugin-vue';
3import preview from 'vite-plugin-vue-component-preview';
4
5export default defineConfig({
6	plugins: [
7		preview(),
8		vue(),
9	],
10})

main.ts

1import { createApp } from 'vue';
2import App from './App.vue';
3import Preview from 'vite-plugin-vue-component-preview/client';
4
5const app = createApp(App);
6app.use(Preview);

tsconfig.json (For IDE and vue-tsc support)

1{
2  "vueCompilerOptions": {
3    "plugins": ["vite-plugin-vue-component-preview/tooling"]
4  }
5}

Example

1<!-- Component part -->
2<template>
3	<h1>{{ msg }}</h1>
4	<button @click="count++">count is: {{ count }}</button>
5</template>
6
7<script setup lang="ts">
8import { ref } from 'vue'
9
10defineProps<{ msg: string }>()
11
12const count = ref(0)
13</script>
14
15<!-- Preview part -->
16
17<preview lang="md">
18
19	# This is preview page of HelloWorld.vue
20
21	## Props
22
23	| Props       | Description    |
24	| ----------- | -------------- |
25	| msg         | Title message  |
26
27	## Examples
28
29	<script setup>
30	const msgs = [
31	'Hello Peter',
32	'Hello John',
33	];
34	</script>
35
36	<template v-for="msg in msgs">
37		<slot :msg="msg"></slot>
38	</template>
39
40	<style>
41	body {
42		background-color: green;
43	}
44	</style>
45
46</preview>

Example repo: https://github.com/johnsoncodehk/volar-starter (Open http://localhost:3000/__preview/src/components/HelloWorld.vue to see the result.)

Self-import

When you want to preview the component including <slot>, importing the component itself provides the solution as follows:

1<template>
2	<div>
3		<slot></slot>
4	</div>
5</template>
6
7<preview lang="md">
8
9	<script setup>
10	import TestPreview from './TestPreview.vue'	// TestPreview.vue is the name of this file itself.
11	const msgs = ['1', '2']
12	</script>
13
14	<template v-for="msg in msgs">
15		<TestPreview>
16			test {{ msg }}
17		</TestPreview>
18	</template>
19
20</preview>

This method relates to #17.

Sponsors

Credits

• Markdown parser power by https://github.com/antfu/vite-plugin-vue-markdown