{"id":42009,"library":"storybook-vue-addon","title":"Storybook Vue Addon","description":"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.","status":"active","version":"0.7.1","language":"javascript","source_language":"en","source_url":"https://github.com/tobiasdiez/storybook-vue-addon","tags":["javascript","storybook","storybook-addon","unplugin","vite","vue","webpack","typescript"],"install":[{"cmd":"npm install storybook-vue-addon","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-vue-addon","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-vue-addon","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required Storybook framework for Vue 3 with Vite","package":"@storybook/vue3-vite","optional":false},{"reason":"Core Storybook package needed to define addons and stories","package":"storybook","optional":false},{"reason":"Runtime dependency for Vue components","package":"vue","optional":false},{"reason":"Required for Vite build tool integration","package":"vite","optional":false}],"imports":[{"note":"In .vue files, <Stories> and <Story> are auto-registered by the addon; explicit import is optional but supports TypeScript type checking.","wrong":"import Stories from 'storybook-vue-addon'","symbol":"Stories","correct":"import { Stories } from 'storybook-vue-addon' or declared via unplugin in .vue files"},{"note":"Same as Stories — auto-registered in .vue templates but importable for types.","wrong":"import Story from 'storybook-vue-addon'","symbol":"Story","correct":"import { Story } from 'storybook-vue-addon'"},{"note":"Addon is registered as a string in the addons array; the unplugin is auto-configured.","wrong":"module.exports = { addons: ['storybook-vue-addon/unplugin'] }","symbol":"storybook-vue-addon","correct":"module.exports = { addons: ['storybook-vue-addon'] } in .storybook/main.js"}],"quickstart":{"code":"// Inside .storybook/main.js\nmodule.exports = {\n  stories: [\n    '../src/**/*.stories.@(js|jsx|ts|tsx|vue)'\n  ],\n  addons: [\n    '@storybook/addon-essentials',\n    'storybook-vue-addon'\n  ],\n};\n\n// Example Button.stories.vue\n<script setup lang=\"ts\">\nimport Button from './Button.vue'\n</script>\n<template>\n  <Stories title=\"Button Stories\" :component=\"Button\">\n    <Story title=\"Primary\">\n      <Button background=\"#ff0\" label=\"Button\" />\n    </Story>\n  </Stories>\n</template>\n<docs lang=\"md\">\n# Documentation\n\nThis is an example.\n</docs>","lang":"typescript","description":"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."},"warnings":[{"fix":"Pin to exact version and test upgrades carefully.","message":"The package is in early alpha; breaking changes may occur between minor versions.","severity":"deprecated","affected_versions":">=0.1.0 <1.0.0"},{"fix":"Ensure you are using @storybook/vue3-vite (not vue3-webpack5).","message":"Only @storybook/vue3-vite is supported as a builder; other frameworks (e.g., @storybook/vue3-webpack5) will not work.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Update Node.js to v20 or later.","message":"Required minimum Node version is 20.0.0; older Node versions cause installation failures.","severity":"breaking","affected_versions":">=0.7.0"},{"fix":"Install storybook@^10.0.0.","message":"Peer dependency storybook ^10.0.0 is required; using storybook v9 or v11 will break.","severity":"breaking","affected_versions":">=0.7.0"},{"fix":"Add a tsconfig.json with 'jsx': 'preserve' and include vue files.","message":"The <docs> block uses JSX-like syntax (e.g., <Canvas of={Unchecked} />) but lives inside a .vue file; Volar may report errors without proper configuration.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"search_vec":"'0.7.1':28 '10.0.0':38,40 '20':32 '3.2.47':42 '3/4':46 'addon':3,6,91 'allow':8 'alpha':29 'automat':75 'base':63 'block':70 'bundler':49 'compar':80 'compon':16 'csf':24 'current':26 'custom':69 'dep':35 'differenti':55 'document':73 'editor':67 'esbuild':53 'file':15 'format':25 'full':65 'histoir':82 'idiomat':56 'includ':36 'instead':59 'integr':77 'javascript':87 'key':54 'markdown':72 'nativ':12 'node':31 'nuxt':45 'option':44 'peer':34 'requir':30 'rollup':52 'scope':84 'sfc':17 'singl':14 'stori':10,64 'storybook':1,5,22,39,86,88,90 'storybook-addon':89 'storybook/vue3-vite':37 'string':62 'string-bas':61 'support':68 'syntax':18 'templat':58 'transpil':19 'typescript':96 'unplugin':79,92 'various':48 'version':27 'via':78 'vite':50,76,93 'volar':66 'vue':2,13,41,57,94 'webpack':51,95 'write':9","created_at":"2026-06-04T18:55:10.931163+00:00","updated_at":"2026-06-04T18:55:10.931163+00:00","problems":[{"fix":"npm install --save-dev storybook-vue-addon and ensure tsconfig includes 'vue' types.","cause":"Missing installation of the addon or missing .vue module augmentation.","error":"Cannot find module 'storybook-vue-addon' or its corresponding type declarations."},{"fix":"npm install --save-dev @storybook/vue3-vite@^10.0.0","cause":"Missing required peer dependency @storybook/vue3-vite.","error":"Addon 'storybook-vue-addon' threw an error: Can't resolve '@storybook/vue3-vite'"},{"fix":"Ensure stories is an array of glob patterns, e.g., ['../src/**/*.stories.@(js|ts|vue)']","cause":"The stories configuration in main.js is not an array or contains non-string paths.","error":"TypeError: stories.map is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/tobiasdiez/storybook-vue-addon#readme","github":"https://github.com/tobiasdiez/storybook-vue-addon","docs":null,"changelog":null,"pypi":null,"npm":"storybook-vue-addon","openapi_spec":null,"status_page":null,"smithery":null,"categories":["testing"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}