SoloBook

Isolated Vue 3 component preview, directly in VSCode, without Storybook and without running the full app.

Why

Many projects don't want Storybook added to the repository. Without it, building or tweaking a single component usually means running the whole app and logging in just to see it render. SoloBook lets you preview and iterate on one component in isolation, right from the editor, without touching the real app.

This is a personal, solo-developer tool. It has no team-sharing or collaboration features by design, and it does not depend on or wrap the real Storybook in any way.

Scope: Vue 3 with Vite only. No other frameworks or bundlers are supported.

How it works

Story files live in a hidden .solobook/ folder inside your project, mirroring your source tree (for example src/components/Button.vue gets a matching .solobook/src/components/Button.story.ts). They are plain TypeScript files, not part of Storybook's format:

import Button from '../../../src/components/Button.vue'
import type { StoryFn, StoryModule } from '../../solobook-types'

export default { component: Button } satisfies StoryModule<typeof Button>

export const Default: StoryFn<{ label: string }> = () => ({
  props: { label: 'Click me' },
})

Each named export is a function, not a plain object. It can run any setup code before returning the render arguments, for example mocking an endpoint or seeding a store.

SoloBook starts a Vite dev server using your project's own real vite.config.ts, so your aliases, plugins, and CSS setup all work automatically. The rendered preview updates live as you edit either the component or the story.

Usage

Open any .vue file. Two icons appear in the editor tab bar:

• Split icon: opens (or creates) the matching story file beside the component.
• Preview icon: opens a panel showing every variant of the story, stacked, each in its own isolated frame.

Inside a story file, a small "Preview" link appears above each named export, letting you jump straight to that variant in the preview panel.

Two-way binding

Any prop on the previewed component gets a generic update:<prop> listener wired up automatically, so components using v-model are interactive in the preview without any extra code in the story.

Wrapping the preview

A story can return an optional wrap function to render extra content around the component, for example a debug border or a live readout of its current props:

export const Interactive: StoryFn<Props> = () => ({
  props: { modelValue: false },
  wrap: (inner, props) => h('div', [inner, h('pre', String(props.modelValue))]),
})

Pinia

SoloBook never installs Pinia automatically. If a component needs a store, either seed one directly inside the story function, or activate one project-wide in .solobook/config.ts (see below) so every story can call useStore() without repeating the setup.

Global styles and project-wide setup

.solobook/config.ts is an optional file for anything that needs to apply to every story:

export default {
  globalStyles: ['src/assets/main.css'],
  plugins: [(app) => app.use(myPlugin)],
}

.gitignore

SoloBook never writes to your .gitignore or any other project file outside .solobook/. If you want your story files ignored by git, add this yourself:

.solobook/

Mocking

There is no bundled mocking library. Mock a fetch or XHR call by patching it directly inside a story function; add a library like MSW yourself if you want one.

License

MIT