Quick Summary:

Vue Composition API- Organized, Readable, and Understandable

Introduction

In this tutorial, we will learn and explore Vue Composition API. You might have heard about it, but if not then don’t worry at all! We will start from the basics. For knowing Vue Composition API in a better way you must have knowledge about Options API, we will discuss that too!

I would suggest you visit my previous blog of the Vue 3 Tutorial series- How to Build To-do App with Vue 3 Typescript for setting up the basic demo project because in this tutorial we will be using the same github repository.

What is Vue Composition API?

Vue Composition API is function-based APIs that provides flexibility, improves code readability, and helps to maintain component logic. The main reason for introducing Vue Composition API was to address the limitations of Options API as the component gets larger.

Here are some of the limitations associated with Options API-

Ineffective patterns for reusing logic and component

Poor readability when component grows larger

Code gets complex and difficult to manage when the project size increases

Creates confusion and makes it difficult to use Typescript with ‘this.’

Vue Composition API vs Options API

You might have seen this image if you are learning Vue Composition API. Let’s see briefly what does it mean.

The difference in the component because of Vue Composition API

You will notice a setup() function is the major change. It comprises the component’s logic. In Options API we used to define data, methods, lifecycle, etc separately as a component option, but due to composition API, setup() function will consist of all these.

You might not understand the impact of this update until your component size grows larger. If you worked with a large project having complex component code or have to understand other developers’ code, you might understand the significance of code understandability and readability.

Vue Composition API sorts the component code and makes the logic reusable in a much better way.

Let’s take a sample code from the Github repository: Vue 3 Typescript, which we have built in the previous blog- How to Build a To-do App with Typescript: Vue 3 Tutorial.