Generic component not inferring slot props defined through defineSlots
Vue version
3.3.2
Link to minimal reproduction
Steps to reproduce
Volar is enabled Editor: VSCode
In the App.vue
you can see the problem.
What is expected?
In App.vue
i expect the following:
- IDE recognises
MyTable
as component (highlight it). - IDE provides autocompletion for
MyTable
slots. - IDE correctly infer scoped slots props types from
MyTable.vue
definition.
What is actually happening?
- VSCode does not recognises
MyTable
as component at all (it does not highlight it). - There is no autocompletion for
MyTable
slots. - All scoped slot props marked as
any
type.
System Info
System:
OS: Windows 10 10.0.19044
CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
Memory: 5.56 GB / 15.95 GB
Binaries:
Node: 18.16.0 - C:\nodejs\node.EXE
npm: 9.5.1 - C:\nodejs\npm.CMD
Browsers:
Edge: Spartan (44.19041.1266.0), Chromium (113.0.1774.42)
Internet Explorer: 11.0.19041.1566
npmPackages:
vue: ^3.3.2 => 3.3.2
Any additional comments?
Reproduction was made in SFC Playground, but you can't reproduce bug there.
Reproduction is very simple (only 2 components) so you can bring it to newly created project (npm init vue@latest
).
There's a couple issues on the typescript
Here's running on the latest version of vue (3.3.4)
Some changes to the files:
<template>
<div>
<div v-for="item of data">
<slot
v-for="(_, key) in item"
:name="`${String(key)}-cell`"
:item="item"
/>
</div>
</div>
</template>
<script setup lang="ts" generic=" DataItem extends Record<string, any>">
defineProps<{
data: DataItem[];
}>();
defineSlots<{
[K in keyof DataItem as `${K & string}-cell`]: (props: {
item: DataItem;
}) => any;
}>();
</script>
@pikax Do you have any idea on this issue: https://github.com/vuejs/language-tools/issues/3141#issuecomment-1554326421
@jd-solanki https://github.com/vuejs/core/pull/8374 fixes the issue