GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-04 14:11:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(addon-docs): Preset options for vue-docgen-api

Browse Source 
This commit adds a `vueDocgenOptions` option to the preset options.
It enable users to configure vue-docgen-api for the purpose such as
setting aliases or ignore certain named-exports.

https://github.com/storybookjs/storybook/issues/9615
This commit is contained in:
Shota Fuji 2020-02-01 13:12:39 +00:00
parent c589b96e16
commit e5a9e30255
No known key found for this signature in database
GPG Key ID: 9C4BB9069532AF67
2 changed files with 33 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
addons/docs/src/frameworks/vue/preset.ts
View File

@ -1,8 +1,14 @@
export function webpack(webpackConfig: any = {}, options: any = {}) {
export function webpackFinal(webpackConfig: any = {}, options: any = {}) {
webpackConfig.module.rules.push({
test: /\.vue$/,
loader: 'vue-docgen-loader',
enforce: 'post',
options: {
docgenOptions: {
alias: webpackConfig.resolve.alias,
...options.vueDocgenOptions,
},
},
});
return webpackConfig;
}

27
addons/docs/vue/README.md
View File

@ -32,11 +32,36 @@ module.exports = {
};
```
## Preset options
The `addon-docs` preset for Vue has a configuration option that can be used to configure [`vue-docgen-api`](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api), a tool which extracts information from Vue components. Here's an example of how to use the preset with options for Vue app:
```js
const path = require('path');
module.exports = {
addons: [
{
name: '@storybook/addon-docs',
options: {
vueDocgenOptions: {
alias: {
'@': path.resolve(__dirname, '../'),
},
},
},
},
],
};
```
The `vueDocgenOptions` is an object for configuring `vue-docgen-api`. See [`vue-docgen-api`'s docs](https://github.com/vue-styleguidist/vue-styleguidist/tree/dev/packages/vue-docgen-api#options-docgenoptions) for available configuration options.
## DocsPage
When you [install docs](#installation) you should get basic [DocsPage](../docs/docspage.md) documentation automagically for all your stories, available in the `Docs` tab of the Storybook UI.
Props tables for your components requires a few more steps. Docs for Vue relies on [Addon-vue-info](https://github.com/pocka/storybook-addon-vue-info)'s loader. It supports `props`, `events`, and `slots` as first class prop types.
Props tables for your components requires a few more steps. Docs for Vue relies on [`vue-docgen-loader`](https://github.com/pocka/vue-docgen-loader). It supports `props`, `events`, and `slots` as first class prop types.
Finally, be sure to fill in the `component` field in your story metadata: