Vue 3 Options API vs Composition API – What’s the Difference?

VueJS provides options on how to write components. There are two API styles available – Options API and Composition API. Developers can choose any of the two styles and even mix and match the two styles in the same application. However, the important thing to understand is the difference between Vue 3 Options API vs Composition API.

Technically, VueJS Options API as well as Composition API help design modular VueJS applications. However, the two API styles differ in their approach towards handling data and functions. Options API uses an object of options. On the other hand, Composition API relies on imported functions. This makes them fundamentally different in terms of programming approach.

If you are new to Vue and want to get started quickly, check out this post on VueJS without Build Tools.

In this post, we will look at Vue Options API as well as Composition API examples.

1 – Vue 3 Options API Example

In Vue 3 Options API approach, the component’s logic is defined using an object of options. Basically, these options consist of data, methods and life-cycle methods such as mounted.

Let us look at an example to demonstrate Options API :

<script>
export default {
  // Data
  data() {
    return {
      appName: 'Counter Application',
      counter: 0,
    };
  },

  // Methods
  methods: {
    increment() {
      this.counter++;
    },
    decrement() {
      this.counter--;
    },
  },

  // Lifecycle Method
  mounted() {
    console.log(`The initial count is ${this.counter}.`);
  },
};
</script>

<template>
  <h1>{{ appName }}</h1>
  <h2 ref="count">Count is: {{ counter }}</h2>
  <button @click="increment">Increment</button>
  <button @click="decrement">Decrement</button>
</template>

<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>

Some important points regarding the code snippet:

• Properties returned from data() becomes reactive state. We can access these properties within the functions using the this keyword. For example, the counter variable.
• Methods are functions that mutate state and trigger updates to the DOM. These methods are bound as event listeners. For example, the increment() and decrement() methods. These methods access the counter.
• Lifecycle hooks such as mounted() are called at different stages of a component lifecycle. More on lifecycle methods in a future post.
• Lastly, we have the template where we describe the actual layout. Notice that within the template, we can directly access the state variables such as appName and counter.

You can play around with the above example on StackBlitz.

2 – Vue 3 Composition API Example

In Vue 3 Composition API, we define the logic using imported API functions. In Vue Single File Components, Composition API is used with <script setup>.

See below an example of Composition API.

<script setup>
import { ref, onMounted } from 'vue'

// reactive state
const appName = ref('Counter Application')
const counter = ref(0)


// functions that mutate state and trigger updates
function increment() {
  counter.value++
}

function decrement() {
  counter.value--
}

// lifecycle hooks
onMounted(() => {
  console.log(`The initial count is ${counter.value}.`)
})
</script>

<template>
  <h1>{{ appName }}</h1>
  <h2>Count is: {{ counter }}</h2>
  <button v-bind="incrementButton" @click="increment">Increment</button>
  <button v-bind="decrementButton" @click="decrement">Decrement</button>
</template>

<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>

In the above example, state variables such as counter are declared using ref. This makes the variable reactive. In other words, any change to the value will update the DOM.

We also directly define the event handlers increment() and decrement() where we can modify the value of the reactive state. If interested, you can go through this post about Vue 3 event handlers.

The setup attribute in the script tag is an instruction to Vue to make compile-time transformation. This is the secret sauce that lets us directly access the top-level state variables and functions within the template.

You can play around with the Composition API example on Stackblitz.

Conclusion

Vue 3 Options API vs Composition API is an important choice for developers. While both API styles work fine, they can alter the overall programming style of designing components.

Options API seems easier to start with and you can comfortably use it even without building an application. On the other hand, Composition API is an ideal choice for creating Vue Single-File Components or SFCs with proper build tooling. Composition API also handles code-reusability much better.

The choice of style is ultimately dependent on the application requirements. However, in the long run, Composition API is a better approach.

Want to learn how to bind attributes in VueJS? Check out this post on VueJS Attribute Binding with v-bind.

If you have any comments or queries about this post, please feel free to mention them in the comments sections below.