Want to automatically generate beautiful docs or write stories in docs? Try Storybook Docs!

Docs Mode (docs-addon) is a successor of info-addon, and supports many frameworks/libraries, include Vue.js!

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

| Name | Data type | Default value | Description | | ------------------ | --------------------------------------------- | --------------------------------------------------- | ---------------------------------------------------------------------------------- | | header | boolean | true | Whether to show header or not. | | source | boolean | true | Whether to show source(usage) or not. | | wrapperComponent | Component | default wrapper | Override inline docs component. | | previewClassName | string | undefined | Class name passed down to preview container. | | previewStyle | Style object | undefined | Style passed down to preview container. | | summary | string | '' | Summary for the story. Accepts Markdown. | | components | { [name: string]: Component }\|null | null | Display info for these components. Same type as component's components property. | | docsInPanel | boolean | true | Whether to show docs in addon panel. | | useDocgen | boolean | true | Whether to use result of vue-docgen-api. | | casing | "kebab" \| "camel" \| "pascal" \| undefined | undefined | Which case to use. For detailed usage, see below. |

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.