Vue · Template

`VUE0017`Prefer useTemplateRef for template refs

Finds Vue template code that should use the supported use template ref pattern instead.

vite-doctor/vuetemplateinfoSuggestion

Why it happens

useTemplateRef() links the script binding to the template ref name and gives TypeScript the element or component instance type.

Use the Vue-supported use template ref pattern instead.

Before

<script setup lang="ts">
const input = ref<HTMLInputElement>()
</script>

<template>
  <input ref="input">
</template>

After

<script setup lang="ts">
const input = useTemplateRef<HTMLInputElement>('input')
</script>

<template>
  <input ref="input">
</template>

Run only this rule after editing so the report stays focused on the diagnostic you are closing:

pnpm vite-doctor . --framework vue --rules vue/template/prefer-use-template-ref