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 🎉