DEV Community

Cover image for What is Composition API in Vue 3
Snehal Rajeev Moon
Snehal Rajeev Moon

Posted on • Updated on

What is Composition API in Vue 3

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.
Before we jump to the coding section follow me for more post.

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

You can see the below running code of composition api.

Happy Reading ❤️ 🦄

Top comments (1)

Collapse
 
lyrod profile image
Lyrod • Edited

< script setup > ?