Auto-Generate Controls for SFC Vue Component with Vite

[andrewcourtice]

Hi folks - just wondering if someone would be able to help me out with getting controls generated automatically from a Vue SFC component.

I have followed the setup guide for getting started using Storybook with Vue 3, Vite and TypeScript. Everything is running ok except I cannot get my story to automatically generate controls (or source) based on the components props.

I've had controls configured using the argTypes property but as far as I am aware Storybook should be able to generate these out of the box based on the components props?

I have been hunting through documentation and addons but can't find anything. Any help would be much appreciated.

Here is my current setup:

Storybook Packages:

• "@babel/core": "^7.14.6"
• "@storybook/addon-actions": "^6.3.0"
• "@storybook/addon-essentials": "^6.3.0"
• "@storybook/addon-links": "^6.3.0"
• "@storybook/vue3": "^6.3.0"
• "babel-loader": "^8.2.2"
• "storybook-builder-vite": "^0.0.9"
• "typescript": "^4.3.2"

main.js:

module.exports = {
    "stories": [
        "../src/**/*.stories.mdx",
        "../src/**/*.stories.@(js|jsx|ts|tsx)"
    ],
    "addons": [
        "@storybook/addon-links",
        "@storybook/addon-essentials"
    ],
    "core": {
        "builder": "storybook-builder-vite"
    }
};

preview.js:

export const parameters = {
    actions: {
        argTypesRegex: "^on[A-Z].*"
    },
    controls: {
        expanded: true,
        matchers: {
            color: /(background|color)$/i,
            date: /Date$/,
        },
    },
};

The source component props:

props: {

    /**
        * The unique id of this dropdown panel
    */
    id: {
        type: String,
        default: () => stringUniqueId(6),
    },

    /**
        * Where the dropdown panel originates from.
        * This could also be described as it's anchor point.
    */
    origin: {
        type: String as PropType<Origin>,
        default: 'bottom-centre',
    },

    /**
    * A boolean indicating whether this dropdown panel should be teleported
    */
    teleport: {
        type: Boolean,
        default: false,
    },

    /**
    * A boolean indicating whether the panel should automatically
    * close when an item within the panel is clicked.
    */
    autoClose: {
        type: Boolean,
        default: true,
    },

    /**
        * A value indicating how autofocus should behave within the panel
    */
    autoFocus: {
        type: [Boolean, String],
        default: 'input[type="text"]|[active]|:focusable',
    },

    /**
        * A value indicating whether the dropdown panel should automatically trap focus upon opening
    */
    focusTrap: {
        type: Boolean,
        default: true,
    },

},

The story for this component:

import DropdownPanel from '../../components/dropdown-panel/dropdown-panel.vue';

import template from './templates/default.html?raw';
import hero from '../_base/decorators/hero';

import {
    Meta,
    Story,
} from '@storybook/vue3';

export default {
    title: 'Dropdown Panel',
    component: DropdownPanel,
    decorators: [ hero ],
} as Meta;

const Component: Story = args => ({

    template,

    components: {
        DropdownPanel,
    },

    setup() {
        return {
            args,
        };
    },

});

export const Basic = Component.bind({});

Screenshot showing no controls:

Am I missing something completely obvious?