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.
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!
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.
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.
Vue.js 3 + Vuex + Composition API