Member-only story
The Beginner’s Guide to Vue Template Refs — with Vue 3 Updates
Vue Template Refs give our Javascript code a reference to easily access the template.
Vue Template Refs give our Javascript code a reference to easily access the template. For example, if we needed quick access to a component or HTML element, template refs is the perfect solution.
In Vue 3, the Composition API gives us another way to use template refs. It joins the concept of reactive refs and template refs giving us just one syntax in our Javascript for both situations.
In this tutorial, we’ll be learning all about template refs: how to use them in both the Options API and Composition API, some advanced refs techniques, as well as look at good times to use this feature.
Ready? Let’s jump right in.
Declaring our Template Refs
For our example, we’re going with the standard use case of focusing an input when a user loads a page. This is useful because it can avoid people having to click in a text input and saves extra time. An example of this functionality is on Google’s home page.
But first, we need to create a text input and give it a ref.
