Skip to content
Daily Dev Tip

This tip lives in your new tab — for free.

Install for Chrome →
VUE

Use useTemplateRef() for typed template refs instead of string-matched refs

components/LoginForm.vue
vue
<script setup lang="ts">
import { useTemplateRef, onMounted } from 'vue'

const input = useTemplateRef<HTMLInputElement>('email')
onMounted(() => input.value?.focus())
</script>

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

Vue 3.5 resolves template refs by key at runtime, so the type is inferred and you drop the `ref(null)` declaration that had to match the template name by convention. The old pattern silently returned `null` on a typo; `useTemplateRef` ties the binding to a string key you pass explicitly, and TypeScript knows the element type. Use it for focus management, measuring, and integrating non-Vue libraries against a DOM node.

composition-apirefstypescriptvue3.5