pocka
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
@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-infoThen 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.