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

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.

In the last tip "Easily switch to Composition API in Vue.js 3" I explained how to migrate the basic parts of a Vue.js Object API component to the new Composition API.

However, that's not all. What happens with all instance properties we used to have, such as this.$emitthis.$slotsthis.$attrs and so? They were on the this component instance, but there is no this in Composition API.

In the same line, in the last tip I didn't use props, and you used to access them via this in the component instance. How the heck can you access it now?

The thing is, I haven't explained the arguments of the setup function when using Composition API.

Effectively, the first parameter of the setup function receives all the component properties. Following the example from the last tip, let's add two properties to use as the initial values for the money and delta local state variables:

export default {
  props: {
    money: {
      type: Number,
      default: 10
    },
    delta: {
      type: Number,
      default: 1
    }
  },
  setup(props) {
    const money = ref(props.money);
    const delta = ref(props.delta);

    // ...
  }
};

vue vue.js vue.js 3 api javascript

Bootstrap 5 Complete Course with Examples

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

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

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.

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.

Vue.js 3 Tutorial by Example: Install/Create Vue 3 App and Composition API

Vue.js 3 is the upcoming version of Vue which was re-written from scratch with TypeScript by the Vue team. It's not released to the public yet for the production use, but the beta version is already released.

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.