The bugs are described in the comments of the code.
App.vue
<script setup lang="ts">
import { h, ref } from 'vue';
import Comp from './Comp.vue';
const foo = ref<string>('foo');
/* BUG 1 - moved to: https://github.com/vuejs/core/issues/12307 */
// val should be of type 'string', not 'unknown'
const FunctionalComponent = () => h(Comp, {
/* unknown */ modelValue: foo.value,
['onUpdate:modelValue']: (val /* unknown */) => foo.value = val,
});
</script>
<template>
<!-- BUG 2 -->
<Comp/> <!-- this errors as expected, cause modelValue prop is not provided -->
<Comp :whatever="''" /> <!-- this does not error, somehow passing *any* prop makes the model value not required? -->
</template>
For bug 1, please open a new issue at https://github.com/vuejs/core. We should compile generic components into functional components, but in reality it hasn't done so.
Vue - Official extension or vue-tsc version
2.1.10
VSCode version
1.94.2
Vue version
3.5.12
TypeScript version
5.6.3
System Info
No response
package.json dependencies
No response
Steps to reproduce
The bugs are described in the comments of the code.
App.vue
Comp.vue
What is expected?
Bug 1:
Render functions should have proper type based on the provided value to the generic component.Moved to: https://github.com/vuejs/core/issues/12307Bug 2: Passing any/non-existing prop to a generic component should not make the component's model value "not required".
What is actually happening?
Bug 1:
Render functions have 'unknown' type, regardless of the provided value to the generic component.Moved to: https://github.com/vuejs/core/issues/12307Bug 2: Passing any/non-existing prop to a generic component makes the component's model value "not required".
Link to minimal reproduction
https://github.com/DrWarpMan/vue-generic-bug
Any additional comments?
Possibly related to PR: https://github.com/vuejs/language-tools/pull/4823 (Issue: https://github.com/vuejs/language-tools/issues/4822)