Created by Maximilian Schwarzmüller
September 21, 2020
Join Academind Pro

Composition API - Complete Introduction

The Composition API is a 100% optional new feature, introduced by Vue 3. You can use the Composition API instead of the existing Options API to write Vue components.

In the above video, I provide a thorough introduction to the Composition API.

You can also dive into my Vue - The Complete Guide Course to learn all about Vue, including the Composition API (in greater detail) from the ground up!

Here’s how code looks like when using the Options API:

<template>
  <h2>{{ message }}</h2>
  <button @click="changeMessage">Change Message</button>
</template>

<script>
export default {
  data() {
    return {
      message: 'This works just fine!'
    };
  },
  methods: {
    changeMessage() {
      this.message = 'The Composition API is just an alternative!';
    }
  }
}
</script>

When switching to the Composition API, this code would look like this:

<template>
  <h2>{{ message }}</h2>
  <button @click="changeMessage">Change Message</button>
</template>

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

export default {
  setup() {
    const message = ref('This works just fine!');

    function changeMessage() {
      message.value = 'The Composition API is just an alternative!';
    }

    return {
      message,
      changeMessage
    };
  }
}
</script>

Watch the video at the beginning of this page to get a thorough introduction to the Composition API and understand what’s happening here.