Repository navigation
event listeners should consider camelCase emits #651
Description
event listeners shows Not declared for a camelCase emit, this is not correct:
The code is:
App.vue:
<template>
<Child @input-text="console.log('inputText')" />
</template>
<script setup>
import Child from './Child.vue';
</script>Child.vue
<template>
<input @input="emit('inputText')" />
</template>
<script setup>
const emit = defineEmits([
'inputText',
])
</script>Tested using Chrome extension Vue.js devtools, version 7.5.6.
Reacted by IGezekia, yourock1988 and Rasmus Olofzon
Activity
yourock1988 commentedon Mar 5, 2025
same issue
razofz commentedon Nov 20, 2025
Ran into this as well. This means that when using the
defineModelmacro, where the event emitted is in camel case (update:modelValue), the devtools give a "Not declared" warning, even though the update event triggers and functions normally.If the component specifies
defineEmits(['update:model-value']), i.e. explicit kebab-case, the event listener is considered Declared. But it seems a bit much to add that to all components in the code just to get rid of the warning in the devtools. It's one of the two parts that defineModel does, so also redundant to specify that.After a (quick) look in the repo code, it seems it's partly handled in
process.ts,processEventListenersfunction. Couldn't spend more time to find out more about theinstance.type.emits. Thetypecould come from here, but no obvious emits there. It probably happens somewhere else. Could come from theanytype App in the same file.