juniorVue.js
What is the 'Template Ref' and how do you use it with Script Setup?
Updated May 4, 2026
Short answer
Template refs allow direct access to DOM elements or child component instances.
Deep explanation
In <script setup>, you declare a ref with the same name as the ref attribute in the template. Vue automatically populates the ref with the DOM element once it is mounted.
Real-world example
Integrating a legacy jQuery plugin that needs a direct DOM reference to initialize.
Common mistakes
- Trying to access the ref value before the component is mounted (it will be null).
Follow-up questions
- Can you use refs in v-for?