Addon-docs: DocsPage for Vue

[shilman]

Addon-info replacement for Vue.

• Title
• Info/notes description
• Docgen info
• Source
• Props
• Events / Slots Addon-docs: Generalize DocsPage prop tables #8123

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[bodograumann]

Are props supported for vue, or not?

The above checklist says yes.
This says no: #8013
This could be interpreted either way: #8123
What does “WIP support” mean? https://github.com/storybookjs/storybook/tree/next/addons/docs#framework-support
This suggests addon-docs can replace the info addon: https://github.com/pocka/storybook-addon-vue-info

Jacob told me on discord, that for him it works when he installs storybook-addon-vue-info. I tried that but got conflicts with vue-styleguidist <docs> blocks.

[shilman]

@bodograumann it supports vue props, but not vue events etc. will sort it all out in the coming week.

what does conflicts with vue-styleguidist <docs> blocks mean? cc @elevatebart

[bodograumann]

Ok, then I guess this is a problem with my setup, or a bug. Will try to reproduce on an empty project and possibly create a bug report.

As for the conflict, this is a bit of a complex situation. I have my main application with vue-cli and vue-cli-plugin-storybook, where I try to setup the docs page. In it I directly import vue sfc files from a second package, which contains reusable components. This library package is documented with vue-styleguidist and the components use a custom <docs></docs> block for documentation and examples. This block is interpreted by vue-styleguidist, but when the component is used in the main application, it is ignored.

Now, after I installed storybook-addon-vue-info in the main application, the storybook compilation step did not ignore the docs block anymore. I would guess it cannot interpret it and thus throws an error.

Anyway, what I now understood is, that I don’t need storybook-addon-vue-info to get the vue component props into the storybook docs page. So this conflict should not matter.

[shilman]

@bodograumann You'll need the loader from addon-vue-info to use the Props feature of Storybook Docs, but you don't need to register the rest of the addon.

[bodograumann]

I see. So I guess I need to fix the conflict after all. Do you have any idea, why the storybook-addon-vue-info/loader would concern itself with the <docs> block anyway, @shilman ?

This is the error, that I get:

error  in ./node_modules/my-components/src/layout/FormRow.vue?vue&type=custom&index=0&blockType=docs

Module parse failed: Unexpected character '#' (33:0)
File was processed with these loaders:
 * ./node_modules/storybook-addon-vue-info/loader/index.js
 * ./node_modules/storybook-addon-vue-info/loader/index.js
 * ./node_modules/cache-loader/dist/cjs.js
 * ./node_modules/vue-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|
|
> ### Examples ###
|
| ```vue

 @ ./node_modules/my-components/src/layout/FormRow.vue?vue&type=custom&index=0&blockType=docs 1:0-229 1:245-248 1:250-476 1:250-476
 @ ./node_modules/my-components/src/layout/FormRow.vue
 @ ./node_modules/my-components/src/index.ts
 @ ./node_modules/storybook-addon-vue-info/loader!./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue?vue&type=script&lang=ts&
 @ ./src/App.vue
 @ ./src/stories/example.stories.js
 @ ./config/storybook/config.js
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./node_modules/@storybook/addon-docs/dist/frameworks/common/../../../vue/config.js ./config/storybook/config.js

Could a problem be indicated by the fact that ./node_modules/storybook-addon-vue-info/loader/index.js is listed two times?

[shilman]

@bodograumann Is that an MDX file that's getting loaded somehow by that loader? It should only apply to .[tj]sx? files

Cc @Aaron-Pool

[Aaron-Pool]

@shilman my best guess after perusing things for a few minutes is that the loader for the <docs> block in the vue SFC is creating some sort of intermediary file (I think that's what it does with style and template blocks under the hood, as well), and that file happens to be matching one of the loaders that were added by the addon-docs plugin.

But that could be way off base, just an initial instinct.

[bodograumann]

@shilman I’m not sure how close the styleguidist docs format and MDX are, but it is the former. I have created a sample project where I reproduce the issue: https://github.com/bodograumann/vue-storybook-docs-page-test

To narrow it further down, I changed <docs> to <custom>. The error is still there. So it is not specific to styleguidist.

From this perspective it is a problem in storybook-addon-vue-info/loader.

[shilman]

@elevatebart mind taking a quick look at the repro? Looks like storybook is having a hard time reading vue-styleguidist annotations and I don't know enough about vue to recommend a path forward.

[elevatebart]

I can and will do tonite. Which means in 5 hours.

[elevatebart]

On a side note, the problem does not seem related to annotations. It looks like reading the docs block is making it hard for the SB loader. Will investigate

[elevatebart]

There seem to be a bug in vue-loader
As a workaround you can add an empty loader to the ressourceQuery=custom rule as explained here

[bodograumann]

Thx, the workaround works :-) @elevatebart
Cf. bodograumann/vue-storybook-docs-page-test@87ce1fe

[shilman]

Boo-yah!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.29 containing PR #8567 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[Znegl]

Does anyone has a working example with both the title, description, props and events?
I'm only able to get title and subtitle to work.

[shilman]

@Znegl are you using 5.3-beta? It's only available there.

here's an example: https://github.com/storybookjs/storybook/tree/next/examples/vue-kitchen-sink

[Znegl]

Yup, and i finally found my bug!
I was adding the component: MyComponent property to the export of each individual test instead of the default export of my *.stories.js files.
It all works beautiful now 🤩

[chuckmasucci]

@Znegl Can you show an example of your story and component that is working? I am in the same predicament where I see the example and code but no props or methods.

[bodograumann]

@chuckmasucci, have a look here https://github.com/Aaron-Pool/Vue-Cli-Storybook-Docs. Maybe that helps you. @Aaron-Pool posted this in storybookjs/vue-cli-plugin-storybook#73.

[Znegl]

@chuckmasucci Sadly not, since it's a closed source corporate project on a local git server.
Did the links from @bodograumann help you? If not, I might be able to take some time look at it.

[pksunkara]

I have released https://github.com/storybookjs/vue-cli-plugin-storybook 1.2.0 which should get DocsPage working for Vue (with and w/o typescript)