https://github.com/johnsoncodehk/vite-plugin-vue-component-preview

Vite plugin for preview Vue component
https://github.com/johnsoncodehk/vite-plugin-vue-component-preview

Last synced: about 20 hours ago
JSON representation

Vite plugin for preview Vue component

• Host: GitHub
• URL: https://github.com/johnsoncodehk/vite-plugin-vue-component-preview
• Owner: johnsoncodehk
• License: mit
• Created: 2022-06-18T14:12:26.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2024-06-29T23:03:12.000Z (8 months ago)
• Last Synced: 2025-02-12T22:14:21.938Z (8 days ago)
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vite-plugin-vue-component-preview
• Size: 72.3 KB
• Stars: 128
• Watchers: 5
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-vue-component-preview

This 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

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

	
{{ msg }}

	count is: {{ count }}


import { ref } from 'vue'

defineProps<{ msg: string }>()

const count = ref(0)

	# This is preview page of HelloWorld.vue

	## Props

	| Props       | Description    |

	| ----------- | -------------- |

	| msg         | Title message  |

	## Examples

	

	const msgs = [

	'Hello Peter',

	'Hello John',

	];

	

	

		

	

	

	body {

		background-color: green;

	}

	

```

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 ``, importing the component itself provides the solution as follows:

```html

	


		

	


	

	import TestPreview from './TestPreview.vue'	// TestPreview.vue is the name of this file itself.

	const msgs = ['1', '2']

	

	

		

			test {{ msg }}

		

	

```

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