Access template refs in Composition API in Vue.js 3

Access template refs in Composition API in Vue.js 3

Quick tip on how to access the old this.$refs by using ref() in the new Composition API in Vue.js 3 components. You've seen in the last tip "Use old instance properties in Composition API in Vue.js 3" how to access instance properties in the new syntax. However, our beloved this.$refs wasn't included in the setup context object as you realized if you read the tip.

You've seen in the last tip "Use old instance properties in Composition API in Vue.js 3" how to access instance properties in the new syntax.

However, our beloved this.$refs wasn't included in the setup context object as you realized if you read the tip.

So, how can you work with template refs in Composition API?

It might be more simple than you think! The thing is, Vue.js unifies the concept of refs, meaning that you just need to use the ref() function you already know for declaring reactive state variables in order to declare a template ref as well.

vue vue.js vue.js 3 api

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Easily switch to Composition API in Vue.js 3

A step by step guide on how to migrate a Vue.js component from the traditional Object API to the modern Composition API, easy and in a cheatsheet format. The idea is to give you some tips related to new features you can find on Vue.js 3 as they get available. For now, we'll focus on Composition API, one of the most game-changing features!

Create a i18n Plugin with Composition API in Vue.js 3

A example on how to use the inject and provide functions to create a i18n plugin using Composition API in Vue.js 3. The way plugins are coded in Vue.js 3 with Composition API differ from traditional plugins. Traditional are used via a install function and added using Vue.use(plugin). They usually manipulate/extend the Vue prototype.

Use old instance properties in Composition API in Vue.js 3

Learn how to use this.$emit, this.$attrs and more in the new Composition API, where you have no this instance in your Vue.js Components. However, that's not all. What happens with all instance properties we used to have, such as this.$emit, this.$slots, this.$attrs and so? They were on the this component instance, but there is no this in Composition API.

Why is Vue JS the most Preferred Choice for Responsive Web Application Development?

<h1 class="fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-4 longer">Why is Vue JS the most Preferred Choice for Responsive Web Application Development?</h1> <p>For more than two decades, JavaScript has facilitated businesses to develop...

Vue.js 3 + Vuex + Composition API

Vue.js 3 + Vuex + Composition API