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>
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.
Vue - Official extension or vue-tsc version
not sure
VSCode version
1.95.0
Vue version
3.5.11
TypeScript version
vite?
System Info
package.json dependencies
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-metaHowever this is not working for pure javascript components:component.vue
story.js
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