vite-plugin-vue-component-preview

KO | EN

gitlite — search

#python #react #typescript #go #linux #docker #macos #nodejs #java #windows #awesome #vue #security #open-source

vite-plugin-vue-component-preview

(★ 133)

Vite plugin for preview Vue component

vite-plugin-vue-component-preview Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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`

```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"]
  }
}
```

## Example

```html

<template>
	<h1>{{ msg }}</h1>
	<button @click="count++">count is: {{ count }}</button>
</template>

defineProps<{ msg: string }>()

const count = ref(0)
</script>

# This is preview page of HelloWorld.vue

## Props

| Props       | Description    |
	| ----------- | -------------- |
	| msg         | Title message  |

## Examples

</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:

```html
<template>
	<div>
		<slot></slot>
	</div>
</template>

</preview>
```

This method relates to [#17](https://github.com/johnsoncodehk/vite-plugin-vue-component-preview/issues/17).

## Sponsors

## Credits

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

vite-plugin-vue-component-preview

vite-plugin-vue-component-preview Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

vite-plugin-vue-component-preview

vite-plugin-vue-component-preview Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README