Storybook

Visual documentation for UI components in isolation, using Storybook 8 with Vue 3 and Vite.

Stack

• Storybook 8 (^8.6.14)
• @storybook/vue3-vite — Vue 3 + Vite builder
• Addons: @storybook/addon-essentials, @storybook/addon-a11y, @storybook/addon-links

Configuration

• .storybook/main.ts — stories from components/**/*.stories.ts
• .storybook/preview.ts — global decorators and Tailwind styles
• .storybook/mocks/components.ts — mocked Nuxt components for isolation

Commands

npm run dev              # Nuxt dev server (port 3000)
npm run storybook        # Storybook (port 6006)
npm run dev:storybook    # Nuxt + Storybook in parallel
npm run build-storybook  # Static build

Story conventions

• Colocated: Component.vue + Component.stories.ts
• CSF3 with typed Meta and StoryObj
• Cover Default, edge states (loading, disabled), and interactive variants when relevant

Existing stories

• UiButton, PlayButton, NotificationDot
• FilterPills, Icon

Workflow

1. Run Nuxt if a story needs runtime context: npm run dev
2. Run Storybook: npm run storybook or npm run dev:storybook
3. Add stories when introducing reusable UI components
4. Use the Storybook agent rule (.cursor/rules/storybook-agent.mdc) to audit coverage and pick the next components to document