Quick prototyping and UI feedback tool built on top Vite
Preview is a UI feedback tool built on top Vite.
<preview>
blocks as unit test fixtures/examples.vue
file, you can
Preview: Show preview
commandInstall @vuedx/preview
as dev dependency
npm add -D @vuedx/preview
Add plugin to vite config file
import VuePlugin from '@vitejs/plugin-vue';
import { PreviewPlugin } from '@vuedx/preview';
export default {
plugins: [VuePlugin(), PreviewPlugin()],
};
npx -y @vuedx/preview
in root directory of a Vue projectUse <preview>
custom block to define previews. e.g.
<script setup>
const props = defineProps({
type: String,
});
</script>
<template>
<button :class="type">
<slot />
</button>
</template>
<preview name="Primary">
<Button type="primary">Primary Button</Button>
</preview>
<preview name="Secondary">
<Button type="secondary">Secondary Button</Button>
</preview>
We try to generate previews when no <preview>
blocks are defined. However, the automatic generation is trivial and only works for simpler cases for now.
We are exploring automatic generation using static code analysis, and active looking for feedback. You can help us by creating issues when generated preview is not helpful or any suggestions that might improve previews.
Use $p.http.delayed()
helper to stub a delayed response.
<preview>
<setup
:requests="{
'/response/delayed': $p.http.delayed(1000)
}"
/>
</preview>
TODO: document this.
TODO: document this.
<preview>
blocks could create noise and editor tools like "search in all files" would be difficult to use. We want to explore alternative to <preview>
block:
.preview
file next to .vue
file using same SFC-like structureThis package is part of VueDX project, maintained by Rahul Kadyan. You can 💖 sponsor him for continued development of this package and other VueDX tools.