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.
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.
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.
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/>'
})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.
A Storybook addon that shows Vue component's information.
@storybook/vue>=4.0.0
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
}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.
| 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. |
{
// 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.
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.
For real example, see example directory.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent