Registry / testing / storybook-vue-addon

storybook-vue-addon

library0.7.1jsnpmunverified

A Storybook addon that allows writing stories in native Vue Single File Component (SFC) syntax, transpiling them to Storybook's CSF format. Current version 0.7.1 (alpha) requires Node >=20 and peer deps including @storybook/vue3-vite ^10.0.0, storybook ^10.0.0, Vue ^3.2.47, and optionally Nuxt 3/4 or various bundlers (Vite, webpack, Rollup, esbuild). Key differentiators: idiomatic Vue templates instead of string-based stories, full Volar editor support, custom <docs> block for markdown documentation, and automatic Vite integration via unplugin. Comparable to Histoire but scoped to Storybook.

testing

npm install storybook-vue-addon

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · STORYBOOK-VUE-ADDO

storybook-vue-addon

testingjavascriptv0.7.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Stories

✓ import { Stories } from 'storybook-vue-addon' or declared via unplugin in .vue files

✗ import Stories from 'storybook-vue-addon'

In .vue files, <Stories> and <Story> are auto-registered by the addon; explicit import is optional but supports TypeScript type checking.

Story

✓ import { Story } from 'storybook-vue-addon'

✗ import Story from 'storybook-vue-addon'

Same as Stories — auto-registered in .vue templates but importable for types.

storybook-vue-addon

✓ module.exports = { addons: ['storybook-vue-addon'] } in .storybook/main.js

✗ module.exports = { addons: ['storybook-vue-addon/unplugin'] }

Addon is registered as a string in the addons array; the unplugin is auto-configured.

Configures Storybook main.js to load .stories.vue files and adds the addon, then writes a simple Vue story SFC with Stories, Story, and docs block.

// Inside .storybook/main.js module.exports = { stories: [ '../src/**/*.stories.@(js|jsx|ts|tsx|vue)' ], addons: [ '@storybook/addon-essentials', 'storybook-vue-addon' ], }; // Example Button.stories.vue <script setup lang="ts"> import Button from './Button.vue' </script> <template> <Stories title="Button Stories" :component="Button"> <Story title="Primary"> <Button background="#ff0" label="Button" /> </Story> </Stories> </template> <docs lang="md"> # Documentation This is an example. </docs>

Debug

Known issues

deprecatedThe package is in early alpha; breaking changes may occur between minor versions.

fix

Pin to exact version and test upgrades carefully.

affects: >=0.1.0 <1.0.0

gotchaOnly @storybook/vue3-vite is supported as a builder; other frameworks (e.g., @storybook/vue3-webpack5) will not work.

fix

Ensure you are using @storybook/vue3-vite (not vue3-webpack5).

affects: >=0.1.0

breakingRequired minimum Node version is 20.0.0; older Node versions cause installation failures.

fix

Update Node.js to v20 or later.

affects: >=0.7.0

breakingPeer dependency storybook ^10.0.0 is required; using storybook v9 or v11 will break.

fix

Install storybook@^10.0.0.

affects: >=0.7.0

gotchaThe <docs> block uses JSX-like syntax (e.g., <Canvas of={Unchecked} />) but lives inside a .vue file; Volar may report errors without proper configuration.

fix

Add a tsconfig.json with 'jsx': 'preserve' and include vue files.

affects: >=0.1.0

Errors

Common errors & fixes

Cannot find module 'storybook-vue-addon' or its corresponding type declarations.

Missing installation of the addon or missing .vue module augmentation.

fix

npm install --save-dev storybook-vue-addon and ensure tsconfig includes 'vue' types.

Addon 'storybook-vue-addon' threw an error: Can't resolve '@storybook/vue3-vite'

Missing required peer dependency @storybook/vue3-vite.

fix

npm install --save-dev @storybook/vue3-vite@^10.0.0

TypeError: stories.map is not a function

The stories configuration in main.js is not an array or contains non-string paths.

fix

Ensure stories is an array of glob patterns, e.g., ['../src/**/*.stories.@(js|ts|vue)']

Upgrade

Version history

0.7.1latest on npm

Audit

Dependencies

@storybook/vue3-viterequiredRequired Storybook framework for Vue 3 with Vite

storybookrequiredCore Storybook package needed to define addons and stories

vuerequiredRuntime dependency for Vue components

viterequiredRequired for Vite build tool integration

Agent activity

6 hits · last 30 days

node

Resources

githubhttps://github.com/tobiasdiez/storybook-vue-addon ↗

packagestorybook-vue-addon ↗

homepagehttps://github.com/tobiasdiez/storybook-vue-addon#readme ↗