Storybook Addon Vue Info

1.4.2 · deprecated · verified Sun Apr 19

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.

Common errors

```
Module not found: Error: Can't resolve 'storybook-addon-vue-info/register' in '/path/to/.storybook'
```
cause Incorrect import path for addon registration in `.storybook/addons.js`.

fix Change `import 'storybook-addon-vue-info/register'` to `import 'storybook-addon-vue-info/lib/register'`.
```
TypeError: Cannot read properties of undefined (reading 'info') or Storybook Info panel is empty/not displaying data.
```
cause The `info` option was omitted from the story parameters, or `vue-docgen-loader` is not correctly configured to extract component metadata.

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.
```
Error: [vue-docgen-api] Cannot find component definition for 'ComponentName' (or similar errors related to `vue-docgen-api` during Storybook startup).
```
cause `vue-docgen-loader` is not correctly processing Vue files, or there's a version incompatibility with `vue-docgen-api`.

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.

Warnings

breaking 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.
Fix: Migrate to `@storybook/addon-docs`. Consult the official Storybook documentation for migration guides and setup instructions.
breaking 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.
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.
deprecated 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.
Fix: Replace `propsDescription` with `description` in your story `info` options, for example: `{ info: { description: 'Prop description here.' } }`.
gotcha 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.
Fix: Update the import statement to `import 'storybook-addon-vue-info/lib/register'` in `.storybook/addons.js`.
gotcha 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.
Fix: Always include an `info` object in your story parameters, e.g., `add('story', () => ({...}), { info: { summary: '...' } })`.

Install

npm install storybook-addon-vue-info npm
yarn add storybook-addon-vue-info yarn
pnpm add storybook-addon-vue-info pnpm

Imports

withInfo
wrong:
```
const { withInfo } = require('storybook-addon-vue-info')
```
correct:
```
import { withInfo } from 'storybook-addon-vue-info'
```
Primarily used as a Storybook decorator to enable the info panel for stories. The project uses ES modules.
setDefaults
```
import { setDefaults } from 'storybook-addon-vue-info'
```
Used to configure global default options for the addon, such as hiding the header or source.
register
wrong:
```
import 'storybook-addon-vue-info/register'
```
correct:
```
import 'storybook-addon-vue-info/lib/register'
```
This import registers the addon panel with Storybook. Note the required `/lib/` path segment.

Quickstart

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.

npm install --save-dev storybook-addon-vue-info vue-docgen-loader vue-docgen-api
# yarn add -D storybook-addon-vue-info vue-docgen-loader vue-docgen-api

// .storybook/addons.js
import 'storybook-addon-vue-info/lib/register';

// .storybook/webpack.config.js
const path = require('path');
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.vue$/,
    loader: 'vue-docgen-loader',
    enforce: 'post'
  });
  return config;
};

// .storybook/preview.js (or config.js for older Storybook versions)
import { addDecorator } from '@storybook/vue';
import { withInfo, setDefaults } from 'storybook-addon-vue-info';

addDecorator(withInfo);
setDefaults({
  header: false, // Don't show header by default
  source: true // Show source code by default
});

// stories/MyComponent.stories.js
import MyAwesomeComponent from './MyAwesomeComponent.vue';

export default {
  title: 'MyComponent',
  component: MyAwesomeComponent,
  decorators: [withInfo]
};

export const Default = () => ({
  components: { MyAwesomeComponent },
  template: '<my-awesome-component />'
});

Default.parameters = {
  info: {
    summary: 'This is an example of MyAwesomeComponent, demonstrating props, events, and slots.'
  }
};

view raw JSON →