Extract Vue component props to another file will be ignored by Storybook.

[rockmandash]

Describe the bug

If you write Vue component's props in another file, and then import it and spread it to the props property section, Storybook won't be able to detect those props.

To Reproduce

1. vue create sb6-test with TypeScript template
2. cd sb6-test
3. npx sb@next init
4. create two files

HelloWorldButton.vue

<template>
  <button :disabled="disabled">Hello World</button>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: {
    disabled: Boolean,
  },
});
</script>

HelloWorldButton.stories.ts

import HelloWorldButton from "./HelloWorldButton.vue";

export default {
  title: "HelloWorldButton",
  component: HelloWorldButton,
};

export const Normal = (_: any, { argTypes }: any) => ({
  props: Object.keys(argTypes),
  components: { HelloWorldButton },
  template: `
    <HelloWorldButton v-bind="$props" />
  `,
});

Now everything looks fine

However, if you extract those props like this

<template>
  <button :disabled="disabled">Hello World</button>
</template>

<script lang="ts">
  import Vue from "vue";
  import { PropValidator } from "vue/types/options";

  const props = {
    disabled: Boolean as PropValidator<boolean>,
  };

  export default Vue.extend({
    props: {
      ...props,
    },
  });
</script>

Now the Storybook can't detect those props right now.

[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!

[shilman]

Sorry for the slow reply. I expect this is a limitation of vue-docgen-api, the library we use to extract the props table in Storybook.

@elevatebart can you confirm?
@jonniebigodes we should probably document these limitations somehow, although there are so many different corner cases I'm not sure the best place/way to do that. WDYT?

[elevatebart]

This is indeed a limitation of the current static analysis.
In Vue 2 at least, I would advise against using spread to show props of final components.
For clarity purposes, instead, you can use mixins or extends to avoid duplicating code. They will show on the documentation.

[stefashkaa]

Hello @elevatebart ! I have a similar issue but with mixins usage. You said that mixin props will show in the documentation, but it doesn't if it's not explicitly defined as argTypes in the story/stories.

I'm using Vue 2 with TypeScript and Storybook v6.0.28. Here is an example:

Button.vue

<script lang="ts">
import { Component, Mixins, Prop } from 'vue-property-decorator'
import MyMixin from './MyMixin'

@Component
export default class MyButton extends Mixins(MyMixin) {}
</script>

MyMixin.ts

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class MyMixin extends Vue {
  /**
   * Some property which should be shown on a doc page
   */
  @Prop({ default: '', type: String }) readonly someProp!: string
}

Please tell me does Storybook have an alternative for displaying mixin props in the storybook documentation without explicitly using them as story controls?

[elevatebart]

Hello @stefashkaa

Thank you for taking the time to explain your use case.
Everything should indeed be working fine here, but you found a bug.
I will be fixing it soon.

[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!

[scottnath]

@elevatebart do you have more info on what the bug might be? I'm seeing this error still in the latest storybook and vue3.

cheers

[LarsAlleleijn]

Just giving this thread another bump.
I went trough a whole series of different setups (Vue 2.7.x / Storybook 6.5.16 to Vue 3.2.x / Storybook 7.0.2 .. imported types / interfaces / native Props Declaration); imported props (and emits) are being ignored.

Example-code (tried in any setup):

<script setup lang="ts">
import { importedProps } from "../props";

const props = defineProps<importedProps>(); // ❌ when defined/imported as interface
const props = defineProps<importedProps>(); // ❌ when defined/imported as type
const props = defineProps(importedProps); // ❌ when defined/imported as regular props
const props = defineProps(['name', 'city']); // ✅ props are extracted correctly

Is there any mentionable workaround / progress on this subject?

Sidenote:
The example above includes interface-/type- imports which are used for defining props. This is not supported by default (Vue Docs , using Vue Macros to cover this). Still; this setup is a valid and working one and does not justify the fact regular Vue prop-definitions are being ignored too (when imported).

[ruuskju]

Btw imported types are now officially supported in vue 3.3. SFC.
vuejs/core#8083

[shaniqwa-drm]

Hi, is there any progress on this issue? I have to say that in my React projects everything works amazing but unfortunately in Vue it dosen't...in React it would even extract descriptions if you add comments above your interface properties. it would be great to get this supported for Vue lovers! 🙏