Contents
vite-plugin-vue-component-preview
This Vite plugin support <preview lang=”md”> custom block in SFC for preview single Vue component.
Usage
vite.config.ts
import { defineConfig } from ‘vite’;
import Vue from ‘@vitejs/plugin-vue’;
import Preview from ‘vite-plugin-vue-component-preview’;
export default defineConfig({
plugins: [
Preview(),
Vue(),
],
})
tsconfig.json
{
“compilerOptions”: {
“types”: [“vite-plugin-vue-component-preview/client”]
}
}
src/main.ts
import { createApp } from ‘vue’;
import App from ‘./App.vue’;
import Previewer from ‘virtual:vue-component-preview’;
const app = createApp(App);
app.use(Previewer);
// …
Example
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="
<template>
<h1>{{ msg }}</h1>
<button @click="count++">count is: {{ count }}</button>
</template>
<script setup>
import { ref } from ‘vue’
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<preview lang="md">
# This is preview page of HelloWorld.vue
## Props
| Props | Description |
| ———– | ————– |
| msg | Title message |
## Examples
<script setup>
const msgs = [
‘Hello Peter’,
‘Hello John’,
];
</script>
<template v-for="msg in msgs">
<slot :msg="msg"></slot>
</template>
</preview>”>
<!– Component part –>
<template>
<h1>{{ msg }}</h1>
<button @click=”count++“>count is: {{ count }}</button>
</template>
<script setup>
import { ref } from ‘vue’
defineProps<{ msg: string }>()
const count = ref(0)
</script>
<!– Preview part –>
<preview lang=”md“>
# This is preview page of HelloWorld.vue
## Props
| Props | Description |
| ———– | ————– |
| msg | Title message |
## Examples
<script setup>
const msgs = [
‘Hello Peter’,
‘Hello John’,
];
</script>
<template v-for=”msg in msgs“>
<slot :msg=”msg“></slot>
</template>
</preview>
