@qababadr/prevue
v0.0.12
Published
Component preview tool for Vue 3
Readme
PreVue
✨ Features
- ⚡ Lightweight Vue 3 component preview environment
- 🧩 Preview components in isolation
- 🔥 Full Vite HMR support
- 🎨 Supports component scoped styles
- 🛠 Zero configuration inside your main application
- 📦 Works directly from npm
📦 Installation
Install PreVue using npm:
npm install @qababadr/prevueor:
npm i @qababadr/prevue🚀 Setup
1. Create a Preview Application Folder
Create a dedicated folder anywhere inside your project.
For example:
YourProject/
│
├── src/
│
├── AppPreviews/
│
└── package.jsonThe folder name is completely up to you.
Examples:
AppPreviews
ComponentPreview
VuePreview
Sandbox2. Add a Vite Configuration
Inside your preview folder create:
AppPreviews/
│
├── vite.config.ts
├── main.ts
├── index.html
│
└── previews/Example:
AppPreviews/vite.config.ts
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { prevue } from "@qababadr/prevue";
export default defineConfig({
root: "AppPreviews",
server: {
hmr: {
host: "localhost",
},
},
plugins: [
vue(),
prevue({
previewDir: "previews",
}),
],
});previewDir
The previewDir option points to the folder containing your preview components.
Example:
prevue({
previewDir: "previews",
});means PreVue will search:
AppPreviews/
└── previews/
├── Button.preview.vue
├── Card.preview.vue
└── Input.preview.vueYou can rename this folder:
prevue({
previewDir: "sandbox",
});then:
AppPreviews/
└── sandbox/
├── Button.preview.vue3. Create the Preview Entry Point
Create:
AppPreviews/main.tsAdd:
import previews from "virtual:prevue/previews";
import { createPrevue } from "@qababadr/prevue";
import "@qababadr/prevue/style.css";
createPrevue(previews).mount("#app");4. Create the HTML Entry
Create:
AppPreviews/index.htmlContent:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Component Previews</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="./main.ts"></script>
</body>
</html>5. Add Your Preview Components
Create your preview components inside the folder defined by previewDir.
Example:
AppPreviews/
└── previews/
├── StyledCounterButton.preview.vue
├── UserCard.preview.vue
└── LoginForm.preview.vueA preview component is a normal Vue 3 Single File Component:
<script setup lang="ts">
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<button @click="count++">Clicks: {{ count }}</button>
</template>
<style scoped>
button {
padding: 12px 20px;
border-radius: 10px;
background: #2563eb;
color: white;
}
</style>▶️ Run PreVue
Add a script in your package.json:
{
"scripts": {
"preview:components": "vite --config AppPreviews/vite.config.ts"
}
}Start the preview environment:
npm run preview:componentsYour component preview application will start with Vite.
📁 Example Structure
A complete setup:
YourProject/
├── src/
├── AppPreviews/
│ ├── vite.config.ts
│ ├── main.ts
│ ├── index.html
│ │
│ └── previews/
│ ├── Button.preview.vue
│ ├── Card.preview.vue
│ └── Modal.preview.vue
│
├── package.json
└── node_modules/🤝 Contributing
Contributions, issues, and feature requests are welcome.
Feel free to open an issue or submit a pull request.
📄 License
MIT © BADR QABA