Closed
Description
Vue - Official extension or vue-tsc version
3
VSCode version
latest
Vue version
3.5
TypeScript version
5.8.3
System Info
System:
OS: macOS 15.5
CPU: (12) arm64 Apple M3 Pro
Memory: 285.34 MB / 36.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 22.14.0 - ~/.local/state/fnm_multishells/99960_1750819359200/bin/node
Yarn: 1.22.22 - ~/.local/state/fnm_multishells/99960_1750819359200/bin/yarn
npm: 10.9.2 - ~/.local/state/fnm_multishells/99960_1750819359200/bin/npm
pnpm: 9.0.2 - /opt/homebrew/bin/pnpm
bun: 1.1.4 - /opt/homebrew/bin/bun
Browsers:
Chrome: 138.0.7204.51
Safari: 18.5package.json dependencies
{
"dependencies": {
"@vue/tsconfig": "^0.7.0",
"typescript": "^5.8.3",
"vue": "^3.5.13",
"vue-tsc": "^3.0.0"
},
"scripts": {
"build": "vue-tsc --noEmit"
}
}
Steps to reproduce
Description
When using nested component wrappers, the @click event is not properly propagated through the component chain, resulting in a "missing event" error.
Component Structure
Component C (uses Component B)
↓
Component B (wraps Component A)
↓
Component A (wraps Button)
↓
Button (native element)
Issue
The @click event defined in Component C is throwing a type error
Code Examples
Component A (Button Wrapper)
<template>
<button
class="btn"
:disabled="disabled"
:type="type"
>
<slot />
</button>
</template>
<script setup lang="ts">
interface Props {
disabled?: boolean
type?: 'button' | 'submit' | 'reset'
}
defineProps<Props>()
</script>Component B (Wraps Component A)
<template>
<div class="wrapper">
<ComponentA
:disabled="disabled"
:type="type"
:loading="loading"
>
<slot />
</ComponentA>
</div>
</template>
<script setup lang="ts">
import ComponentA from './ComponentA.vue'
interface Props {
disabled?: boolean
type?: 'button' | 'submit' | 'reset'
loading?: boolean
}
defineProps<Props>()
</script>Component C (Uses Component B)
<template>
<ComponentB
:disabled="isDisabled"
:type="buttonType"
:loading="isLoading"
@click="handleClick" <-- type error here
>
Click me
</ComponentB>
</template>
<script setup lang="ts">
import ComponentB from './ComponentB.vue'
const isDisabled = ref(false)
const buttonType = ref('button')
const isLoading = ref(false)
const handleClick = () => {
console.log('Button clicked!')
}
</script>What is expected?
Not expecting a type error in Component C
What is actually happening?
Error
Object literal may only specify known properties, and 'onClick' does not exist in type 'NonNullable<{ readonly disabled?: boolean | undefined; readonly type?: "button" | "submit" | "reset" | undefined; } & VNodeProps & AllowedComponentProps & ComponentCustomProps>'.ts-plugin(2353)
Link to minimal reproduction
No response
Any additional comments?
Great job on v3 btw! Looks great regardless 🎉