Introduction

VueJS is a popular JavaScript framework for building web user interfaces. It uses reusable instances with custom HTML elements called Components. These components can be created using the Options API or the Composition API. The Options API is the default way to create components in Vue, after Vue 2.7, the Composition API was introduced to create components using imported functions instead of declaring options.

In this article, we'll explore the differences and how to use the Composition API in Vue 3.

The code snippets shown in this article are written in Vue 3

Options API vs Composition API

The Options API and Composition API are two different ways of creating components in Vue. Let's take a look at how they work and how they are different from each other.

Options API

Let's first understand what the Options API is. The Options API is the default way of creating components in Vue 2 and earlier versions. It uses a set of pre-defined options that define the component's behaviour. These options include props, data, computed properties, methods, and lifecycle hooks in the component.

Here is an example of a component created using the Options API:

<script>
export default {
  data() {
    return {
      message: "Hello, Vuers!",
    };
  },
  methods: {
    updateMessage() {
      this.message = "This is the Options API!";
    },
  },
};
</script>
 
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

Try in SFC Playground

In this example, we have defined a component that has a message data property and an updateMessage method. When the button is clicked, the updateMessage method is called, and the message data property is updated in the DOM.

Composition API

The Composition API is the other way of creating components in Vue 3. It provides a more flexible and modular approach to building components by allowing developers to organize component logic into reusable functions. These functions can be imported and used in multiple components, making sharing logic easier.

Here is the same component created using the Composition API:

<script setup>
import { ref } from "vue";
 
const message = ref("Hello, Vuers!");
 
const updateMessage = () => {
  message.value = "This is the Composition API!";
};
</script>
 
<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

Try in SFC Playground

In this example, we have defined a component using the Composition API. Instead of using pre-defined options, we have used the <script setup>tag to define the component logic. Adding this tag allows us to define our component's behaviour using JavaScript functions and variables. Within the tag, we import the ref function from 'vue' to create a reactive state variable called message and define a function called updateMessage to update the message variable.

Simple as that!

Why use the Composition API?

The Composition API offers several advantages over the Options API, including better logic reuse, more flexible code organization, and better type inference.

Better Logic Reuse

Logic reuse is efficient through the composable functions which is an improvement over the mixins used in the Options API having several drawbacks. The community project VueUse is an example.

Flexible Code Organization

Options API's code organization can be a mess when the component's logic becomes too complex. Composition API allows writing code freely with a more flexible organization.

Better Type Inference

Composition API has better TypeScritpt adoption than the Options API. It uses plain variables and functions and makes it naturally type-friendly and less reliant on mutual type hints.

Smaller Production Bundle

Code written in Composition API is more efficient and minification-friendly than the Options API equivalent. The compiled template code can directly access variables declared inside <script setup>, leading to better minification and smaller production bundles.

Visual Representation

Here's how the code will visually look when written in both methods:

Options API and Composition API visualization

You can see that in the composition API, the component logic is grouped with related variables and functions unlike in the Options API the logic is grouped in their respective buckets.

Some users may find the Composition API to be less organized than the Options API due to being more familiar with the "guard rails" that put the code into respective buckets in the Options API. This is a matter of perspective. The Composition API allows writing code freely as you would in vanilla JavaScript. You are free to use your code organization and best practices. The Options API locks you into a prescribed code organization pattern making it difficult to refactor or improve code quality in larger projects. In contrast, Composition API provides better long-term scalability.

Conclusion

In this article, we have explored the Composition API, how it works, and why it is more suitable than the Options API. We have seen how the Composition API can make our code more modular, readable, and flexible. We have also looked at some of the functions provided by the Composition API, including reactive, computed and lifecycle hooks.

Table of Contents