Vue 3 components in two different API styles: Options API and Composition API

In a previous tutorial the process of setting up a new Vue 3 project has been explained. If you first want to set up a Vue 3 app to then work with the Options or Composition API, please take a look at this tutorial.

Now let’s take a look at how the components work.

With Vue 3 the Composition API has been introduced. In comparison to the Options API, we are now able to organize our code by feature using the Composition API rather than only being able to separate it by data, computed, etc.

In our previously created app, let’s open the HelloWorld.vue component, you can find it under src/components/HelloWorld.vue and built an increment function / method with both the Options and Composition API.

Options API

Using the Options API, we can define a component’s logic using an object of options such as data, methods, and mounted. Properties defined by options are exposed on this inside our functions, which points to the component instance. Now let’s change the <template> and <script> tags of our HelloWorld.vue component.

Change the <template> tag to:

<template>
  <div class="hello">
    <button @click="increment">Count is: {{ count }}</button>
  </div>
</template>

Change the <script> tag to:

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      count: 0
    }
  },

  // Methods are functions that mutate state and trigger updates.
  // They can be bound as event listeners in templates.
  methods: {
    increment() {
      this.count++
    }
  },

  // Lifecycle hooks are called at different stages
  // of a component's lifecycle.
  // This function will be called when the component is mounted.
  mounted() {
    console.log(`The initial count is ${this.count}.`)
  }
}
</script>

If you start the Vue app you should see a count button, that triggers our increment function / method.

Composition API

Now let’s change the <script> tag of our HelloWorld.vue component again, to use the Composition API this time. We can leave the <template> tag as it is.

Using the Composition API, we can define a component’s logic using imported API functions. The Composition API is typically used with a <script setup> inside Single File Components (SFCs). The setup attribute makes Vue perform compile-time transforms that have a few advantages over using just the <script> tag like less boilerplate, better runtime performance or imports and top-level variables / functions declared in <script setup> being directly usable in the template.

Here is the same component, with the exact same template, but using Composition API and <script setup> instead:

Replace the <script> tag with the <script setup> tag:

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

// reactive state
const count = ref(0)

// functions that mutate state and trigger updates
function increment() {
  count.value++
  console.log(`Now the count is ${count.value}.`)
}

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

If you start the Vue app again you should see the same count button, that triggers our increment function.

Options vs. Composition API – which one to choose?

In general both the Options and the Composition API can be used equally to develop applications. The underlying system for both is the same, as the Options API is implemented on top of the Composition API.

The Options API is centered around the concept of a “component instance” (this as seen in the example), which is ideal for users coming from object-oriented programming (OOP). It is also more beginner-friendly by abstracting away the reactivity details and enforcing code organization via option groups, like data, methods, and mounted

The Composition API is centered around declaring reactive state variables, such as ref() and reactive(), and composing state from multiple functions. It is more of a free-form, and requires more knowledge about how reactivity works, in return it is more flexible.

For more information there is a Composition API FAQ available on vuejs.org and another helpful resource is https://learnvue.co/.