Argstable not being generated for Vue3 components using vue-class-component syntax

[Benjamindudok]

Describe the bug
I made a new example project with typescript and vue-class-component using Vue-cli. Then installed storybook and made a new story for one of the components that use the vue-class-component syntax. Storybook won't generate a proper argstable for props specified these components. It doesnt show an error, but does show a warning in the developer console:

./src/stories/Button-class.vueModule Warning (from ./node_modules/vue-docgen-loader/lib/index.js):[vue-docgen-loader] failed to parse the component file with docgen-api: Cannot read property 'get' of undefined

To Reproduce
Steps to reproduce the behavior:

1. Create a new project with vue-cli, selecting class style syntax and typescript
2. Install storybook into the new project using npx sb@next init
3. Convert the example button component that is generated by storybook init to vue-class-component style syntax (https://github.com/Benjamindudok/vue-3-storybook-mdx-example/blob/master/src/stories/Button-class.vue)
4. Start storybook serve

Expected behavior
It should generate an argstable using vue-class-component style syntax, as it does for composition API components

Screenshots
Left is a button using vue-class-component, right is the default button using composition API

Notice the difference in the argstable. The argstable only shows arguments you have set in the story. It for example omits the on click event.

this is what happens then you don't supply any argument values to a story: (again: left uses vue-class-component, right composition API)

Edit: important detail, the button doesnt render because one of the props is 'required'. This is not the issue

Code snippets
I made an example repo which i'm also using to test my storybook configuration.
https://github.com/Benjamindudok/vue-3-storybook-mdx-example

System
System:
OS: Windows 10 10.0.19041
CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
Binaries:
Node: 12.18.3 - C:\Program Files\nodejs\node.EXE
npm: 6.14.6 - C:\Program Files\nodejs\npm.CMD
Browsers:
Chrome: 88.0.4324.182
Edge: Spartan (44.19041.423.0), Chromium (88.0.705.74)
npmPackages:
@storybook/addon-actions: ^6.2.0-beta.1 => 6.2.0-beta.1
@storybook/addon-essentials: ^6.2.0-beta.1 => 6.2.0-beta.1
@storybook/addon-links: ^6.2.0-beta.1 => 6.2.0-beta.1
@storybook/preset-scss: ^1.0.3 => 1.0.3
@storybook/vue3: ^6.2.0-beta.1 => 6.2.0-beta.1

Additional context
I don't know for sure vue-class-component in vue3 is supported by vue-docgen-api. I think it did work for vue2. Vue-docgen-api also has examples in their repo to test against: https://github.com/vue-styleguidist/vue-styleguidist/blob/dev/packages/vue-docgen-api/tests/components/class-component/Button.vue

[phated]

It turns out that vue-docgen-api doesn't support Vue 3 yet. See vue-styleguidist/vue-styleguidist#997 and vue-styleguidist/vue-styleguidist#1002 as the tracking issues for that.

[jenshaase]

Hi,

I had the same problem. I found this little workaround. Maybe it helps.

import {Vue, Options} from 'vue-property-decorator'

// Create an alias for Options
const Component = Options;

// Instead of @Options do @Component
@Component({
  name: 'Icon'
})
export default class Icon extends Vue {
  // ...
}

The trick here is to alias the Options Decorator to Component. Then vue-docgen-api works for me. At least on my small example.

[magno32]

Hi,

I had the same problem. I found this little workaround. Maybe it helps.

import {Vue, Options} from 'vue-property-decorator'

// Create an alias for Options
const Component = Options;

// Instead of @Options do @Component
@Component({
  name: 'Icon'
})
export default class Icon extends Vue {
  // ...
}

The trick here is to alias the Options Decorator to Component. Then vue-docgen-api works for me. At least on my small example.

This gets me:

data[key].__s is not a function

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).