What's New with the Composition API in VueJS

Modern front-end frameworks like React, Angular and Vue, encourage developers to reuse components. It is a fine software development practice improving both efficiency and maintainability. However, these components could become hard to read and understand as the logical requirements of the projected increase. VueJS has introduced a new API named Composition API with the Vue 3 update to address this issue.

Why a Composition API?

Earlier versions of Vue used Options APIs to enforce code organization. Six types of options named components, props, methods, data, life cycle hooks, and computed are used to organize the code. For example, If we develop a calculator component, we have to define reactive properties within the data() option and write our logic within the methods option. Ultimately, our code will be organized in six different places.

<script>  
 export default {
     data: function() {
       return {
         //adding properties
         //subtracting properties
         //multiplying properties
         //...
       }
     },
     methods: {
         //adding logic
         //subtracting logic
         //multiplying logic
         //...
     }
 }   
</script>

However, this approach didn't show promising results with complex components, and developers could find better ways to organize the code. Also, there were drawbacks in code reuse patterns, and developers often faced issues in namespacing, configurations, etc.

Composition API was introduced to address these challenges. It is a whole new way of structuring and writing Vue components, and it handles the above complications nicely. Another exciting thing is that React Hooks inspire Vue Composition API. However, both of them handle the same set of issues but in a different way. The critical difference between them is that Vue's setup function runs only once while creating a component but React Hooks can run multiple times during rendering.

Composition API Organizes the Code by Considering Logic

In Composition API, we have a new method named setup(). This method allows developers to organize their components and logics without getting restricted to component options. As you can see below, we define functions outside and call them inside our setup method.

<script>  
 export default {
     setup() {
       //adding function
       //subtracting function
       //multiplying function
       //...
     },
 }   
 function adding(){}
 function subtracting(){}
 function multiplying(){}
</script>

Note: As a best practice, keep these functions at a much more low-level file structure.

Code Reusability with Composition Function

There are three composition functions in the above example. We can keep these functions inside separate files and import them individually to the calculator component to use them inside the setup method. Since we develop these functions individually, we can reuse these functions in different components in a much more flexible manner.

Installing Composition API

You don't need to install the Composition API explicitly for Vue 3 projects. But if you are using Vue 2, you won't get it by default, and you can install it using NPM:

# NPM
npm install @vue/composition-api -- save

Then you can use it by importing composition API in your main.js file.

// Main.js
import VueCompositionAPI from "@vue/compostion-api";
Vue.use(VueCompositionAPI);

If you are already into VueJS, understanding Composition APIs will be much easier.
However, if you are new, I recommend getting familiar with VueJS essential and Vue components first.

Composition API vs Options API

To get a better understanding about Composition API, I will implement a Vue component using both Options API and Composition API.

Using Options API

Vue Composition API is one of the significant changes when moving from Vue 2 to Vue 3. However, even in Vue 3, developers can stick with the Options API rather than moving to the Composition API.

But is it worth moving from Options API to Composition API? You will get a better understanding after comparing these two options.

// Without Composition APIs
<template>
<div>
   <h1>Salary</h1>
     <p>Salary: {{salary}}</p>
     <button @click="deductSalary()">Deduct Salary</button>
     <button @click="increaseSalary()">Increase Salary</button>
   </div>
</template>
<script>  
export default {
   data: function() {
     return {
       salary: 0
     }
   },
   methods: {
     deductSalary() {
       this.salary -= 100;
     },
     increaseSalary() {
       this.salary += 1000;
     },
   },
   mounted() {
     this.$nextTick(function () {
     })
   },
   updated() {
     this.$nextTick(function () {

     })
   }
   //...More Options  
</script>

Besides, the two functions are grouped under the methods option and two lifecycle hooks in the above example. However, things will be more complicated in the real world when components demand more functionality.

So, let's see how we can implement the same example using Composition API.

Using Composition API

When using composition API, developers can structure their logic as standalone functions. These compositions can be customized and used across multiple components as they accept configurations.

Step 1: Maintain Each Function as Standalone Functions

Here, we can create composition functions in three different methods.

1. Create two new files and write the composition functions separately. 
2. Create one new file and write them in it.
3. Write composition functions in the component.

But when the logic starts growing, the second and the third approaches will get messy. So as a best practice, many developers use the first approach to keep the code clearer and readable.

import { ref } from 'vue'
export default function useIncreaseSalary(amount) {
  const salary = ref(0);
  const salary = salary + amount;
 return salary;
}

import { ref } from 'vue'
export default function uesDeductSalary(amount) {
  const salary = ref(0);
  const salary = salary - amount;
  return salary;
}

Step 2: Import the Methods to the Component and Configure them in the setup() Method

<template>
  <div>
     <h1>Salary</h1>
       <p>{{salary.value}}</p>
       <button @click="deductSalary()">Deduct Salary</button>
       <button @click="increaseSalary()">Increase Salary</button>
   </div>
</template>
<script>
 import { ref } from "@vue/composition-api";
 import useDeductSalaty from "./components/deductSalary";
 import useIncreaseSalary from "./components/increaseeSalary";
 export default {
  setup() {
    const salary = ref(0);
    const deductSalary = useDeductSalaty( /* configurations */ );
    const increaseSalary = useIncreaseSalary( /* configurations */ );
    return { salary, deductSalary, increaseSalary };
 }
</script>

Note: ref takes the argument and returns it wrapped within an object with a value property, which is reactive anywhere.

That’s it. You can adapt to the Composition API and build more organized and readable components with these two steps.

Conclusion

Composition APIs made Vue developers' work easier and efficient compared to Vue 2. But Options API is not obsolete, and you can be in your comfort zone and use the Options API approach. However, as a Vue developer, my suggestion is to move with the composition APIs as it has added very useful code structuring and reusing methods.