Vue Isolation
Vue-iso provides you with a playground to develop your vue components in isolation.
It is inspired by but ships without the overhead of Storybook, is vue-only and has a developer-first approach.
There is no pretty UI that lets you change your component details from within the browser directly. Instead, it requires you to write all your stories directly in your SFC and expose them.
This makes development a lot easier since you never lose your temporary stories, as there are no, and you never leave your component. You can focus on development and preview your component stories with HMR.
Usage
You define stories by exposing a _stories
object from your SFC. Each key holds
a story, where the key is the story name and the value holds the props and
slots for the story.
<script lang="ts" setup>
defineProps<{
someProp?: string
}>()
defineExpose({
_stories: {
someStory: {
props: {
someProp: "Lorem ipsum",
},
slots: {
someSlot: "Lorem ipsum",
},
},
anotherStory: {
props: {
someProp: "Foo",
},
slots: {
default: "Bar",
someSlot: "Baz",
},
},
},
})
</script>
<template>
<div class="border p-4">
<p>{{ someProp }}</p>
<p>
<slot />
<slot name="someSlot" />
</p>
</div>
</template>
In the GUI you can switch between your stories with a single click or show all of them.
Import your components from the root of your project like /src/components/Btn.vue
.
Installation
pnpm add -D vue-iso
Setup
Create a new page for your isolated playground:
<script lang="ts" setup>
import { IsolationPage } from "vue-iso"
import "vue-iso/dist/style.css"
</script>
<template>
<IsolationPage />
</template>
In your vue-router routes add a route for your page, you probably only want to have it inside your dev env.
const routes: RouteRecordRaw[] = [
// …
]
const devOnlyRoutes: RouteRecordRaw[] = [
{
path: "/iso",
component: () => import("pages/IsolationPage.vue"),
},
]
if (import.meta.env.DEV) {
routes.push(...devOnlyRoutes)
}