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, generally, we choose one or the other (to avoid confusion).

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

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

So let’s get started 👇.

Comparison 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. But, the traditional Optional API syntax can be more intuitive for developers new to Vue.js.

What is the Composition API?

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

In this approach, logic is organized into reusable functions, which allows 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>

Migrate 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 (and with patience).

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

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

Now you will have to replace 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>