pocka / Storybook Addon Vue Info

Deprecated

This addon is deprecated due to the retirement of official addon-info.

Storybook now has an alternative addon, called Docs addon(addon-docs), which comes with native Vue.js support and automatically props/events/slots documentation powered by vue-docgen-api.

There will be no feature addition nor bug fixes to this repo. Please use Docs addon instead.

Migration to Docs

As described above, Docs addon uses vue-docgen-api via vue-docgen-loader. They are also the tools storybook-addon-vue-info uses internally. So the migration steps is quite simple.

docgen tools are no longer peerDependencies

Since the Docs addon specifies vue-docgen-api and vue-docgen-loader as direct dependency, you don't have to list them in your package.json.

 "dependencies": {
-  "vue-docgen-api": "x.x.x",
-  "vue-docgen-loader": "x.x.x"
 }

Of course, you can keep them to controll which exact versions to use.

Explicitly specify which component to documentate

You need to set component field in your story metadata.

// foo.stories.js
import MyComponent from './my-component.vue'

export default {
  title: 'Components/MyComponent',
  component: MyComponent
}

export const story = () => ({
  components: { MyComponent },
  template: '<my-component/>'
})

Move summary inside a JSDoc comment or MDX

summary option equivalent in Docs addon is component comments or MDX. Docs addon reads a component comment and displays it as a description for the component.

// legacy.stories.js
export const myStory = () => ({
  /* ... */
})

myStory.story = {
  info: {
    summary: 'foo bar'
  }
}

<!-- component -->
<script>
  /**
   * foo bar
   */
  export default {
    /* ... */
  }
</script>

Or you can use MDX for more complicated usage.

storybook-addon-vue-info

A Storybook addon that shows Vue component's information.

• Demo

Requirements

• @storybook/vue>=4.0.0

Getting started

First, install the addon.

npm install --save-dev storybook-addon-vue-info

# yarn add -D storybook-addon-vue-info

Then register in addons.js.

// .storybook/addons.js

// Don't forget "/lib/" !!
import 'storybook-addon-vue-info/lib/register'

And setup a webpack loader in order to extract component information with vue-docgen-api.

npm install --save-dev vue-docgen-loader vue-docgen-api

# yarn add -D vue-docgen-loader vue-docgen-api

// .storybook/webpack.config.js

// This example uses "Full control mode + default".
// If you are using other mode, add payload of `config.module.rules.push` to rules list.
module.exports = ({ config }) => {
  config.module.rules.push({
    test: /\.vue$/,
    loader: 'vue-docgen-loader',
    enforce: 'post'
  })

  return config
}

Usage

Add withInfo decorator then set info options to the story.

NOTE: info option is required for the addon. If you omit it, the addon does nothing.

import { storiesOf } from '@storybook/vue'

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

storiesOf('MyComponent', module)
  .addDecorator(withInfo)
  .add(
    'foo',
    () => ({
      components: { MyAwesomeComponent },
      template: '<my-awesome-component/>'
    }),
    {
      info: {
        summary: 'Summary for MyComponent'
      }
    }
  )

You can set the addon as global decorator.

// config.js
import { addDecorator } from '@storybook/vue'

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

addDecorator(withInfo)

To set default options, use setDefaults.

// .storybook/config.js
import { setDefaults } from 'storybook-addon-vue-info'

setDefaults({
  header: false
})

For more details, see live examples.

Options

Valid casing options

{
  // Don't convert names
  casing: undefined
}

{
  // Show names in kebab-case
  casing 'kebab'
}

{
  // Show prop names in camelCase and
  // Show component names in PascalCase
  casing: 'camel' // or 'pascal'
}

{
  // Show prop names in camelCase and
  // Show component names in kebab-case
  casing: {
    props: 'camel',
    component: 'kebab'
  }
}

In addition to addon options, we have a component option.

Set descriptions manually

With vue-docgen-api, the addon automatically shows descriptions and types extracted by docgen (see example in vue-docgen-api README). However, if you want to explicitly specify desciprion for component props, events or slots, add description option for your story component.

Assume <my-awesome-component> have props label and visible.

storiesOf('MyComponent', module)
  .addDecorator(withInfo)
  .add(
    'foo',
    () => ({
      components: { MyAwesomeComponent },
      template: '<my-awesome-component/>',
      description: {
        MyAwesomeComponent: {
          props: {
            // These description will appear in `description` column in props table
            label: 'A label for my awesome component',
            visible: 'Whether component is visible or not'
          },
          events: {
            click: 'Event for user clicking the component'
          },
          slots: {
            default: 'Place text or icon here'
          }
        }
      }
    }),
    {
      info: true
    }
  )

For more detail, please take a look at live example.

Example

For real example, see example directory.