Created by Maximilian Schwarzmüller
    Last Updated on September 21, 2020

    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.