storybook
storybook copied to clipboard
[Bug]: Vue 3.4 - props and events are not inferred from `defineModel`
Describe the bug
Since defineModel
became stable in Vue 3.4, this is now the recommended approach for using v-model
.
Ideally Storybook would understand that defineModel
is constructing the props/events for these (example below) and display them in the argTypes
automatically. It would be preferred if both the type and JSDoc comment could be understood also.
After 3.4:
<script setup>
const model = defineModel();
</script>
<template>
<input v-model="model" />
</template>
Before 3.4:
<script setup>
const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
</script>
<template>
<input
:value="props.modelValue"
@input="emit('update:modelValue', $event.target.value)"
/>
</template>
@chakAs3 @kasperpeulen will this be fixed moving the argtype inference to volar? https://github.com/storybookjs/storybook/pull/22285
@shilman I adopted Volar quickly starting from April 2023 because it's the only assurance of staying current with Vue API changes. I've emphasized this point consistently, and if you review the pull request, you'll find comprehensive documentation outlining the desired format for the documentation and supported features
@shilman Yes and no :D I quickly tested it out, with Volar the property will be added but the JSDoc / description and the corresponding event is missing. However, this feature is currently missing in Volar itself.
I added a feature request for Volar about this: https://github.com/vuejs/language-tools/issues/3894