How could I generate props documentation if they are defined in a separate file?

Question

I've got a props file PropsFile.props.ts

export const props = {
  /**
   * Some comment
   */
  name: {
    type: String,
    required: true,
  }
};

export type Props = ExtractPropTypes<typeof props>;

I've got a vue file like this

    <template>
         some template here
    </template>
    
    <script lang="ts">
    import { defineComponent } from 'vue';
    import { props } from './PropsFile.props';
    
    export default defineComponent({
        name: "ComponentName",
        props
    });
    </script>

Storybook doesn't create a document page with props and comments, like in that case if I define props inside vue file.

How could I solve this issue?

Answer 1

I assume you want to share these props with multiple components. To do that, the "Vue 2" way is to use a mixin. This mixin would be appropriately parsed by vue-docgen-api and rendered in storybook as you need.

Unfortunately, docgen does not execute your code. It parses it. So some sets of instructions might not render as props even if in the end they actually are.