Description
Describe the bug
When using the new useTemplateRef
in Vue 3.5+ alongside unplugin-vue-components
, the exposed types from a component cannot be automatically inferred.
Steps to Reproduce
- Define a
MyChild.vue
component with a sayHello method exposed:
<script setup lang="ts">
const sayHello = () => {
console.log("Hello world!");
};
defineExpose({
sayHello,
});
</script>
- In a parent component, set up
unplugin-vue-components
and useuseTemplateRef
:
Working Example (Explicit Import):
<template>
<MyChild ref="myChild" />
</template>
<script setup lang="ts">
import MyChild from './MyChild.vue'; // <-- We are using an explicit import here to make it work
const myChild = useTemplateRef('myChild');
myChild.value?.sayHello();
</script>
Here, the explicit import ensures that useTemplateRef can infer the sayHello type.
Failing Example (No Explicit Import):
<template>
<MyChild ref="myChild" />
</template>
<script setup lang="ts">
const myChild = useTemplateRef('myChild');
myChild.value?.sayHello(); // <--- Error here
</script>
Without the import, type inference breaks, and the following error is displayed:
Property 'sayHello' does not exist on type '{}'. ts-plugin(2339)
Expected Behavior
useTemplateRef
should infer the exposed types from MyChild.vue
when using unplugin-vue-components
, without requiring an explicit import.
Actual Behavior
Type inference fails unless MyChild.vue
is explicitly imported, despite unplugin-vue-components
resolving the component.
Note
I tried to get a live reproduction going to reproduce the error but StackBlitz doesn't show the TypeScript error for some reason. The link is there none the less.
Reproduction
System Info
System:
OS: macOS 15.1.1
CPU: (8) arm64 Apple M1
Memory: 103.17 MB / 16.00 GB
Shell: 5.9 - /bin/zsh
Binaries:
Node: 20.11.0 - ~/.nvm/versions/node/v20.11.0/bin/node
npm: 10.2.4 - ~/.nvm/versions/node/v20.11.0/bin/npm
pnpm: 9.6.0 - ~/.nvm/versions/node/v20.11.0/bin/pnpm
Browsers:
Brave Browser: 131.1.73.89
Chrome: 131.0.6778.109
Edge: 131.0.2903.86
Safari: 18.1.1
Used Package Manager
pnpm
Validations
- Follow our Code of Conduct
- Read the Contributing Guide.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- The provided reproduction is a minimal reproducible of the bug.