Vue · VUE0017
Prefer useTemplateRef for template refs
Finds Vue template code that should use the supported use template ref pattern instead.
vue/template/prefer-use-template-refsrc/rule-packs/vue/rules/vue/prefer-use-template-ref.ts Upstream docs Run this rule
pnpm vite-doctor . --framework vue --rules vue/template/prefer-use-template-ref
Why it matters
useTemplateRef() links the script binding to the template ref name and gives TypeScript the element or component instance type.
Recommended fix
Use the Vue-supported use template ref pattern instead.
Useful links
Example
Use useTemplateRef
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>