useTemplateRef Type Inference with unplugin-vue-components in Vue 3.5+

[BenJackGill]

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

1. Define a MyChild.vue component with a sayHello method exposed:

<script setup lang="ts">
const sayHello = () => {
    console.log("Hello world!");
};

defineExpose({
    sayHello,
});
</script>

2. In a parent component, set up unplugin-vue-components and use useTemplateRef:

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

https://stackblitz.com/edit/vitejs-vite-2x1yc3tj?file=src%2FApp.vue,src%2Fcomponents%2FMyChild.vue,vite.config.js

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.

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• vitejs-vite-2x1yc3tj (Open reproduction)