Skip to content

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

Open
@BenJackGill

Description

@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>
  1. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions