Storybook

Storybook is a tool for developing, testing, and documenting UI components in isolation.

Vike works with Storybook out-of-the-box.

Vike's Vite plugin isn't loaded when running Storybook.

This is because Storybook is typically used for developing/testing components in isolation — Vike's Vite plugin isn't needed. For that reason, Vike's Vite plugin removes itself when it detects Storybook.

If for some reason you do need Vike's Vite plugin to be loaded, reach out to Vike maintainers.

Get started

New app

You can scaffold a new Vike app with Storybook at vike.dev/new.

Existing app

In your existing Vike app, run:

npx storybook@latest init

pnpm dlx storybook@latest init

bun x storybook@latest init

yarn dlx storybook@latest init

Storybook auto-detects your Vite + UI framework setup.

Stories

Since Storybook renders components in isolation — without Vike's runtime — write stories for the UI components used by your +Page files, rather than for +Page files themselves.

+Page files often depend on Vike features (such as +data, pageContext, and +Layout) which aren't available inside Storybook. Keeping Vike-specific logic in +Page files and your reusable UI in plain components makes both Vike and Storybook happy.

Example