Up until Vue 2, there was one way to create components in Vue. With Vue 3, a new methodology was introduced called the . Now, if we want to make a component in Vue, we have two ways to do it. You might be wondering what the difference is, exactly, so let's take a look at how the newer Composition API differs from the Vue 2 methodology, which is now known as the Composition API . Options API What is the difference between the Composition and Options API in Vue? The short answer is . The Composition API lets us create components without the need for a large single exportable object, like in the Options API. For example, if we wanted to make a simple counter component with the Options API, it would look like the code below. syntax Options API <template>
    <h1>{{ counter }}</h1>
    <button @click="incrCounter">Click Me</button>
</template>
<script>
export default {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        incrCounter: function() {
            this.counter += 1;
        }
    }
}
</script> If instead we wanted to write the same code as the , it would look like this: Composition API Composition API <template>
    <h1>{{ counter }}</h1>
    <button @click="incrCounter">Click Me</button>
</template>
<script setup>
    import { ref } from 'vue'

    let counter = ref(0);

    const incrCounter = function() {
        counter.value += 1;
    }
</script> You'll notice a few differences: We imported something called - this lets us create reactive variables ref When we increase the counter, we increase , since returns an object. counter.value ref We avoid having to use an entire prototype, and instead just have a since function incrCounter Reactivity in Composition API Along with , we can also use for objects. Both of these give variables reactive capabilities, meaning we don't lose any functionality. ref reactive The benefits of the Composition API As you can see, the composition API is a lot more streamlined than the Options API and requires a lot less code. It also has the added benefit of code. compartmentalizing Let's consider a silly example with two counters - one button increases the output by 1, and the other by 2. In the , we could write it like this: Options API <template>
    <h1>{{ counter }}, {{ doubleCounter }} </h1>
    <button @click="incrCounter">Click Me</button>
    <button @click="increaseByTwo">Click Me For 2</button>
</template>
<script>
export default {
    data() {
        return {
            counter: 0,
            doubleCounter: 0 
        }
    },
    methods: {
        incrCounter: function() {
            this.counter += 1;
        },
        increaseByTwo: function() {
            this.doubleCounter += 2;
        }
    }
}
</script> For the on the other hand, it might look like this: Components API <template>
    <h1>{{ counter }}, {{ doubleCounter }} </h1>
    <button @click="incrCounter">Click Me</button>
    <button @click="increaseByTwo">Click Me For 2</button>
</template>

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

    let counter = ref(0);
    const incrCounter = function() {
        counter.value += 1;
    }
    
    let doubleCounter = ref(0);
  	const increaseByTwo = function() {
      	doubleCounter.value += 2;
    }
</script> The difference is small, but you might notice something interesting - on the , all the related code stays close together, so you don't have to hop around as much. Composition API In the image below, you can see where the code with similar functionality is highlighted in the same color. On the right, the keeps its code all in the same place. On small projects, this doesn't make a big difference - but on larger ones, maintainability increases. Composition API Other Benefits of the Composition API and all the issues such as name collisions that come along with them. Replaces mixins , since it uses mostly normal functions and variables, no complicated typing is required in TypeScript. Better type support - as mentioned, the Composition API requires less code. Smaller files Do I need to use the Composition API now? There is no reason to switch your code to the Composition API if the Options API still works fine for you. The Options API isn't going anywhere, and instead, the Composition API provides an alternative means to create Vue components. No! In some cases, the Options API may still be a better option for you (pun not intended). Is the Composition API better than the Options API? There is no simple answer to that question. Both methods have their merits, and they may be useful in certain situations. Whatever you decide to go with is totally fine, but the Composition API does solve some of the issues the Options API brought along with it.

2022 - HackerNoon Contributor of the Year - Coding

2022 - HackerNoon Contributor of the Year - Coding Skills

2022 - HackerNoon Contributor of the Year - Java

2022 - HackerNoon Contributor of the Year - Javascript

2022 - HackerNoon Contributor of the Year - Website Development

2022 - Tip Your Hat Tutorials Best Tutorials

Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Javascript

Nominated for 2022 - HackerNoon Contributor of the Year - Coding

Nominated for 2022 - HackerNoon Contributor of the Year - Coding Skills

Nominated for 2022 - Tip Your Hat Tutorials Best Tutorials

Nominated for 2022 - HackerNoon Contributor of the Year - Java

Nominated for 2022 - HackerNoon Contributor of the Year - Website Development

Nominated for Coding Guru of 2022

Nominated for 2022 - HackerNoon Contributor of the Year - Typescript

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

What is the Difference Between the Composition and Options API in Vue?

What is the Difference Between the Composition and Options API in Vue?

Too Long; Didn't Read

Company Mentioned

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

What is the Difference Between the Composition and Options API in Vue?

Too Long; Didn't Read

Company Mentioned

Johnny Simpson

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES