useTemplateRef() Get a Template Ref (3.5+ style)
Last updated: 2026-10-22
useTemplateRef() Get a Template Ref (3.5+ style)
useTemplateRef() reads a template ref by its string name, removing the need to declare a matching variable.
| Group | Template & Helpers |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.5+ |
| SSR Support | Yes |
📝 Syntax
const inputEl = useTemplateRef('my-input')
// template: <input ref="my-input">⚙️ Arguments
| key | A string matching the template's ref attribute |
|---|
Returns：A readonly ref, null before mount
▶ Example
Edit the code below and see the live result:
Output：
Clicking focuses the input.💡 Key Points
💡 Tip Recommended in 3.5+; the classic same-name ref still works.
⚠️ Warning Null before mount — guard access or use it after onMounted.
ℹ️ Note Inside v-for it resolves to an array of elements or components.
🏷️ Related Template & Helpers
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Difference from a same-name ref variable?
A Functionally identical; the helper removes the naming constraint and reads clearer.
Q Can it reference a child component?
A Yes — expose methods in the child via defineExpose.
Q What about versions below 3.5?
A Use the classic ref(null) plus ref="txt" pattern.
