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.
Requirements
Getting started
First, install the addon.
npm install --save-dev storybook-addon-vue-info
Then register in addons.js
.
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
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.
import { addDecorator } from '@storybook/vue'
import { withInfo } from 'storybook-addon-vue-info'
addDecorator(withInfo)
To set default options, use setDefaults
.
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
{
casing: undefined
}
{
casing 'kebab'
}
{
casing: 'camel'
}
{
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: {
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.