Storybook using vue-component-meta with JavaScript components

[rodhoward]

Vue - Official extension or vue-tsc version

not sure

VSCode version

1.95.0

Vue version

3.5.11

TypeScript version

vite?

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (24) x64 AMD Ryzen 9 3900XT 12-Core Processor
    Memory: 55.11 GB / 62.73 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.17.0 - ~/.nvm/versions/node/v20.17.0/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.17.0/bin/npm
    bun: 1.1.30 - ~/.bun/bin/bun
  Browsers:
    Chrome: 130.0.6723.69

package.json dependencies

"peerDependencies": {
    "@fortawesome/free-brands-svg-icons": "^6.3.0",
    "@fortawesome/free-regular-svg-icons": "^6.3.0",
    "@fortawesome/free-solid-svg-icons": "^6.3.0",
    "vue": "^3.5.11",
    "lodash": "^4.17.21"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.36",
    "@fortawesome/vue-fontawesome": "^3.0.6",
    "byte-size": "^9.0.0",
    "dompurify": "^3.1.7"
  },
  "devDependencies": {
    "@biomejs/biome": "1.9.3",
    "@storybook/addon-essentials": "^8.4.0",
    "@storybook/vue3-vite": "^8.4.0",
    "@vitejs/plugin-vue": "^5.1.4",
    "@vitest/coverage-v8": "^2.1.2",
    "@vue/test-utils": "^2.4.6",
    "bootstrap": "^4.6.0",
    "happy-dom": "^15.7.4",
    "rollup-plugin-peer-deps-external": "^2.2.4",
    "sass-embedded": "^1.79.5",
    "storybook": "^8.4.0",
    "vite": "^5.4.8",
    "vitest": "^2.1.0",
    "vue-component-meta": "^2.1.10"
  }

Steps to reproduce

I'm trying to get Sorybook automatically populated with jsdocs from my component properties. On top of that I'm hoping for controls to also be selected i.e. check box for boolean radio or select dropdown for params with specific options.
I found this repository which is basically doing exactly what I'd hoped would be possible:
https://github.com/chakAs3/storybook-vue-component-meta
However this is not working for pure javascript components:

component.vue

<template>
  <div>size: {{ size }}</div>
  <div>backgroundColor: {{ backgroundColor }}</div>
</template>
<script>
export default {
  name: "MyCompo1",
  props: {
    /**
     * This is a description of the prop
     * @values 'small', 'medium', 'large'
     * @defaultValue 'medium'
     * @control select
     * @group Size
     * */
    size: {
      type: String,
      default: "medium",
    },
    /**
     * This is a description of the prop
     * @defaultValue false
     * @control color
     * @group Style
     * */
    backgroundColor: {
      type: String,
      default: "red",
    },
  },
};
</script>

story.js

import  ComponentA from './component.vue';

const meta = {
  component: ComponentA,
  tags: ['autodocs'],
};
export default meta;

export const Default = { args: { size: 'large', backgroundColor: 'blue' } };

What is expected?

I would like docs to render with all my jsdocs and Ideally using the @values to also detect and select the radio controls rather than simply providing a string input.

What is actually happening?

No docs are actually getting populated.

Updating the script tag in the component to typescript seems to be all you need to get the docs to come though however to get the control to select properly it only seemed to work from a type script component file not a .vue file.
<script lang="ts">
Perhapse I'm being silly and can safely update all my components to use typescript but I'd prefer not to. I'd like to stay using vinilla javascript.

Link to minimal reproduction

No response

Any additional comments?

No response