Vue3 Ref Element

Posted on  by admin
You block advertising 😢Would you like to buy me a ☕️ instead?

If you’re used to working with Vue 2 $refs and switch to the Vue 3 Composition API, you might wonder how to use $refs inside the new setup() method.

In this article, we find out how to use the new ref() function as a replacement for static and dynamic HTML element references. When using the Vue 3 Composition API via the setup() method, we don’t have access to this.$refs, rather, we can use the new ref() function for the same result.

You might wonder how this can work with dynamic references. Luckily after a short chat with Carlos Rodrigues, I knew the answer (the information is also in the official API documentation, but I somehow missed it).


Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture. Although at first, I didn’t like the new $refs API very much, it gets the job done.

I think it’s only a matter of time until we get used to the new way of doing things with the Composition API.

Modified4 months ago. This is a normal way to define a ref in vue3, but in JavaScript way.And if I'm using TypeScript, I will need to define a type for value element, right?


Not the answer you're looking for? Browse other questions tagged javascripttypescriptvue.jsvuejs3vue-class-components or ask your own question.