{"library":"storybook-addon-vue-info","title":"Storybook Addon Vue Info","type":"library","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.","language":"javascript","status":"deprecated","last_verified":"Sun Apr 19","install":{"commands":["npm install storybook-addon-vue-info"],"cli":null},"imports":["import { withInfo } from 'storybook-addon-vue-info'","import { setDefaults } from 'storybook-addon-vue-info'","import 'storybook-addon-vue-info/lib/register'"],"auth":{"required":false,"env_vars":[]},"links":{"homepage":null,"github":"https://github.com/pocka/storybook-addon-vue-info","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/storybook-addon-vue-info","openapi_spec":null,"status_page":null,"smithery":null},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}