What is Composition API?

Hey Artisan,

In today's block post we are going to see what is Composition API which is the new feature added in Vue 3. Basically, it is a new way to write a component in a better way that we can use the similar functionality within a different component.

Before this, we have used the traditional option API in which we have to write all logic in a single view component, but the problem in using traditional API is that when our component's functionality grows then our component will get overloaded and bulky which cause in the component loading issue.

This problem is solved with help of composition API which is more readable and we can use the same logic in a different view component, in other words, we can say that it provides a better collocate.

How to use Composition API in our component.

We use the setup() method which accepts props and context as arguments, setup() method is executed before the component is created.

Let's see the simple example of traditional Option API and Composition API.

Example 1: Option API - Create a Counter.vue file

<template>
  <div>
    <h3>Example using Traditional Option API</h3>
    <h1 class="text-6xl m-5 text-blue-600">
      {{ counter }}
    </h1>

    <p
      v-show="error"
      class="w-1/2 mx-auto my-4 p-2 border border-red-700 bg-red-600 rounded text-white"
    >
      Counter can not be decrement by {{ counter }}
    </p>
    <div class="flex flex-row justify-center w-1/2 mx-auto">
      <div class="w-1/4 mx-2">
        <button
          @click="increment()"
          type="button"
          class="border border-indigo-800 rounded bg-indigo-900 text-white p-2 w-full"
        >
          +
        </button>
      </div>
      <div class="w-1/4 mx-2">
        <button
          @click="decrement()"
          type="button"
          class="border border-red-500 rounded bg-red-500 text-white p-2 w-full"
        >
          -
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Counter",
  data() {
    return {
      counter: 0,
      error: false,
    };
  },
  methods: {
    increment() {
      this.counter++;
      this.error = false;
    },
    decrement() {
      if (this.counter !== 0) {
        this.counter--;
      } else {
        this.error = true;
      }
    },
  },
};
</script>

Add above component in App.js

<template>
  <div id="app">
    <Counter />
  </div>
</template>

<script>
import Counter from "./components/Counter";

export default {
  name: "App",
  components: {
    Counter,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

See the below-running code

Example 2: Composition API

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h1 class="text-6xl m-5 text-blue-600">
      {{ counter }}
    </h1>
    <p
      v-show="error"
      class="w-1/2 mx-auto my-4 p-2 border border-red-700 bg-red-600 rounded text-white"
    >
      Counter can not be decrement by {{ counter }}
    </p>
    <div class="flex flex-row justify-center w-1/2 mx-auto">
      <div class="w-1/4 mx-2">
        <button
          @click="increment()"
          type="button"
          class="border border-indigo-800 rounded bg-indigo-900 text-white p-2 w-full"
        >
          +
        </button>
      </div>
      <div class="w-1/4 mx-2">
        <button
          @click="decrement()"
          type="button"
          class="border border-red-500 rounded bg-red-500 text-white p-2 w-full"
        >
          -
        </button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from "vue";
export default {
  name: "Counter",
  setup() {
    const msg = ref("Example of Composition API");
    const error = ref(false);
    const counter = ref(0);

    function increment() {
      counter.value++;
      error.value = false;
    }

    function decrement() {
      if (counter.value !== 0) {
        counter.value--;
      } else {
        error.value = true;
      }
    }

    return {
      msg,
      error,
      counter,
      increment,
      decrement,
    };
  },
};
</script>

Now add this component in App.vue

<template>
  <div>
    <Counter />
  </div>
</template>

<script>
import Counter from "./components/Counter";
export default {
  name: "App",
  components: {
    Counter,
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

You can see the below-running code of composition API.

Happy Reading...