Registry / web-framework / storybook-addon-vue-info

storybook-addon-vue-info

library1.4.2jsnpmunverified

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.

web-framework testing

npm install storybook-addon-vue-info

github ↗package ↗

INSTALL

IMPORT

SIG · STORYBOOK-ADDON-VU

storybook-addon-vue-info

web-frameworkjavascriptv1.4.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

withInfo

✓ import { withInfo } from 'storybook-addon-vue-info'

✗ const { withInfo } = require('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.

✓ import 'storybook-addon-vue-info/lib/register'

✗ import 'storybook-addon-vue-info/register'

This import registers the addon panel with Storybook. Note the required `/lib/` path segment.

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.' } };

Debug

Known issues

breakingThis 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.

affects: >=1.0.0

breakingSince 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.

affects: >=1.3.3

deprecatedThe `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.' } }`.

affects: >=1.3.0

gotchaWhen 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`.

affects: >=1.0.0

gotchaThe `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: '...' } })`.

affects: >=1.0.0

Errors

Common errors & fixes

Module not found: Error: Can't resolve 'storybook-addon-vue-info/register' in '/path/to/.storybook'

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.

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).

`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.

Upgrade

Version history

1.4.2latest on npm

Audit

Dependencies

@storybook/addonsrequiredPeer dependency for Storybook addon functionality.

@storybook/vuerequiredPeer dependency for Storybook Vue framework integration.

reactoptionalPeer dependency of Storybook's core, even for Vue projects.

vuerequiredPeer dependency for Vue component functionality.

vue-docgen-loaderrequiredRequired for webpack to extract component information.

vue-docgen-apirequiredUnderlying library for parsing Vue component documentation.

Agent activity

7 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/pocka/storybook-addon-vue-info ↗

packagehttps://www.npmjs.com/package/storybook-addon-vue-info ↗