Options API and Composition API in Vue.js

In Vue.js, there are two different syntaxes for creating components: the Options API and the Composition API.

Both syntaxes can coexist in the same project. They are fully compatible. However, it is generally preferred to choose one or the other (to avoid confusion).

In this course, we will mainly focus on the Composition API because it is the modern and recommended way (and besides, it’s the one I like).

But you need to know about both, especially because you will still encounter the Options API in many tutorials and libraries.

So let’s get to it 👇.

Comparison of Options API vs Composition API

Let’s start by looking at the advantages and disadvantages of each syntax. In summary.

In general, the logic and organization of the new Composition API is better. However, the traditional syntax of the Options API can be more intuitive for new developers in Vue.js.

What is the Composition API?

The Composition API is the new syntax introduced in Vue.js 3, which is more modern and flexible (introduced to address limitations of the Options API).

In this approach, the logic is organized into reusable functions, allowing for better code organization and greater logic reuse.

<template>
  <div>
    <p>Counter: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

What is the Options API?

The Options API is the classic syntax of Vue.js for creating components in Vue.js, which can be more intuitive for beginners.

In this approach, the logic is organized into clearly defined and separated options, such as data, methods, computed, watch, and props, etc…

<template>
  <div>
    <p>Counter: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
  methods: {
    increment() {
      this.count++;
    },
  },
};
</script>

Migrating from Options API to Composition API

If at any point you need to migrate a Vue component from Options API to Composition API, here are some guidelines on how to do it (with patience).

First, import the necessary functions from vue, such as ref, reactive, computed, and watch:

import { ref, reactive, computed, watch } from 'vue'

Now you will need to replace the options like data, methods, computed, and watch with their equivalents,

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

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

const count = ref(0)

const doubleCount = computed(() => count.value * 2)

function increment() {
  count.value++
}
</script>