This Vite plugin support `<preview lang="md">` custom block in SFC for preview single Vue component.
npm install vite-plugin-vue-component-previewThis Vite plugin support custom block in SFC for preview single Vue component.
To use this with VSCode + Volar, see https://github.com/johnsoncodehk/volar/discussions/1511
vite.config.ts
``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(),
],
})
`
main.ts
`ts
import { createApp } from 'vue';
import App from './App.vue';
import Preview from 'vite-plugin-vue-component-preview/client';
const app = createApp(App);
app.use(Preview);
`
tsconfig.json (For IDE and vue-tsc support)
`json`
{
"vueCompilerOptions": {
"plugins": ["vite-plugin-vue-component-preview/tooling"]
}
}
`html
{{ msg }}
# This is preview page of HelloWorld.vue
## Props
| Props | Description |
| ----------- | -------------- |
| msg | Title message |
## Examples
`
Example repo: https://github.com/johnsoncodehk/volar-starter (Open http://localhost:3000/__preview/src/components/HelloWorld.vue to see the result.)
When you want to preview the component including , importing the component itself provides the solution as follows:
`html
test {{ msg }}
``
This method relates to #17.
- Markdown parser power by https://github.com/antfu/vite-plugin-vue-markdown