{"id":12083,"library":"storybook-addon-vue-info","title":"Storybook Addon Vue Info","description":"storybook-addon-vue-info is a Storybook addon designed to display detailed information about Vue components, including their props, events, slots, and source code directly within the Storybook UI. The current stable version is 1.4.2. While it served its purpose by integrating Vue component documentation into Storybook, the project's README explicitly states that it has been superseded by Storybook's official Docs Mode (part of `@storybook/addon-docs`), which offers more comprehensive documentation features and supports various frameworks, including Vue.js. This addon's development appears to be in maintenance mode, with no significant feature additions since the recommendation to switch to addon-docs. Users are strongly encouraged to migrate to `@storybook/addon-docs` for up-to-date and future-proof documentation solutions.","status":"deprecated","version":"1.4.2","language":"javascript","source_language":"en","source_url":"https://github.com/pocka/storybook-addon-vue-info","tags":["javascript","vue","storybook","typescript"],"install":[{"cmd":"npm install storybook-addon-vue-info","lang":"bash","label":"npm"},{"cmd":"yarn add storybook-addon-vue-info","lang":"bash","label":"yarn"},{"cmd":"pnpm add storybook-addon-vue-info","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Storybook addon functionality.","package":"@storybook/addons","optional":false},{"reason":"Peer dependency for Storybook Vue framework integration.","package":"@storybook/vue","optional":false},{"reason":"Peer dependency of Storybook's core, even for Vue projects.","package":"react","optional":true},{"reason":"Peer dependency for Vue component functionality.","package":"vue","optional":false},{"reason":"Required for webpack to extract component information.","package":"vue-docgen-loader","optional":false},{"reason":"Underlying library for parsing Vue component documentation.","package":"vue-docgen-api","optional":false}],"imports":[{"note":"Primarily used as a Storybook decorator to enable the info panel for stories. The project uses ES modules.","wrong":"const { withInfo } = require('storybook-addon-vue-info')","symbol":"withInfo","correct":"import { withInfo } from 'storybook-addon-vue-info'"},{"note":"Used to configure global default options for the addon, such as hiding the header or source.","symbol":"setDefaults","correct":"import { setDefaults } from 'storybook-addon-vue-info'"},{"note":"This import registers the addon panel with Storybook. Note the required `/lib/` path segment.","wrong":"import 'storybook-addon-vue-info/register'","symbol":"register","correct":"import 'storybook-addon-vue-info/lib/register'"}],"quickstart":{"code":"npm install --save-dev storybook-addon-vue-info vue-docgen-loader vue-docgen-api\n# yarn add -D storybook-addon-vue-info vue-docgen-loader vue-docgen-api\n\n// .storybook/addons.js\nimport 'storybook-addon-vue-info/lib/register';\n\n// .storybook/webpack.config.js\nconst path = require('path');\nmodule.exports = ({ config }) => {\n  config.module.rules.push({\n    test: /\\.vue$/,\n    loader: 'vue-docgen-loader',\n    enforce: 'post'\n  });\n  return config;\n};\n\n// .storybook/preview.js (or config.js for older Storybook versions)\nimport { addDecorator } from '@storybook/vue';\nimport { withInfo, setDefaults } from 'storybook-addon-vue-info';\n\naddDecorator(withInfo);\nsetDefaults({\n  header: false, // Don't show header by default\n  source: true // Show source code by default\n});\n\n// stories/MyComponent.stories.js\nimport MyAwesomeComponent from './MyAwesomeComponent.vue';\n\nexport default {\n  title: 'MyComponent',\n  component: MyAwesomeComponent,\n  decorators: [withInfo]\n};\n\nexport const Default = () => ({\n  components: { MyAwesomeComponent },\n  template: '<my-awesome-component />'\n});\n\nDefault.parameters = {\n  info: {\n    summary: 'This is an example of MyAwesomeComponent, demonstrating props, events, and slots.'\n  }\n};\n","lang":"typescript","description":"Demonstrates installation, configuration of webpack and Storybook, and basic usage of `withInfo` and `setDefaults` to display component information within a Storybook story, including setup for a Vue component."},"warnings":[{"fix":"Migrate to `@storybook/addon-docs`. Consult the official Storybook documentation for migration guides and setup instructions.","message":"This addon (`storybook-addon-vue-info`) has been superseded by Storybook's official `@storybook/addon-docs` (Docs Mode). `@storybook/addon-docs` provides a more robust and actively maintained solution for documenting Vue components, along with broader framework support. Users are strongly encouraged to migrate.","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Ensure `vue-docgen-loader` and `vue-docgen-api` are installed as dev dependencies, and configure `vue-docgen-loader` in your `.storybook/webpack.config.js` with the `enforce: 'post'` option.","message":"Since v1.3.3, the custom webpack loader previously used by this addon has been deprecated. It now relies on `vue-docgen-loader` for extracting component information, which requires specific configuration in your Storybook webpack setup.","severity":"breaking","affected_versions":">=1.3.3"},{"fix":"Replace `propsDescription` with `description` in your story `info` options, for example: `{ info: { description: 'Prop description here.' } }`.","message":"The `propsDescription` option for defining property descriptions was deprecated in v1.3.0. Use the more generic `description` option instead, which supports descriptions for props, events, and slots.","severity":"deprecated","affected_versions":">=1.3.0"},{"fix":"Update the import statement to `import 'storybook-addon-vue-info/lib/register'` in `.storybook/addons.js`.","message":"When registering the addon in `.storybook/addons.js`, ensure you use the full path `storybook-addon-vue-info/lib/register`. Omitting `/lib/` will result in a module not found error.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always include an `info` object in your story parameters, e.g., `add('story', () => ({...}), { info: { summary: '...' } })`.","message":"The `info` option is required for each story for the addon to display any information. If omitted, the addon will do nothing for that particular story.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `import 'storybook-addon-vue-info/register'` to `import 'storybook-addon-vue-info/lib/register'`.","cause":"Incorrect import path for addon registration in `.storybook/addons.js`.","error":"Module not found: Error: Can't resolve 'storybook-addon-vue-info/register' in '/path/to/.storybook'"},{"fix":"Ensure each story using `withInfo` has an `info` object in its parameters: `{ info: { summary: '...' } }`. Additionally, verify `vue-docgen-loader` is set up correctly in `webpack.config.js` as per documentation.","cause":"The `info` option was omitted from the story parameters, or `vue-docgen-loader` is not correctly configured to extract component metadata.","error":"TypeError: Cannot read properties of undefined (reading 'info') or Storybook Info panel is empty/not displaying data."},{"fix":"Check `vue-docgen-loader` configuration in `.storybook/webpack.config.js`, ensuring the `test` regex matches your Vue files and `enforce: 'post'` is set. Consider updating `vue-docgen-api` and `vue-docgen-loader` to compatible versions.","cause":"`vue-docgen-loader` is not correctly processing Vue files, or there's a version incompatibility with `vue-docgen-api`.","error":"Error: [vue-docgen-api] Cannot find component definition for 'ComponentName' (or similar errors related to `vue-docgen-api` during Storybook startup)."}],"ecosystem":"npm"}