Why the Composition API

There’s been some confusion over the new Vue 3 composition API. By the end of this article, it should be clear why the limitations of Vue 2 have led to its creation, and how it solves a few problems for us.

In this article, you’ll see exactly why you should learn to use Composition API.

There are currently three limitations you may have run into when working with Vue 2:

• As your components get larger readability gets difficult.
• The current code reuse patterns all come with drawbacks.
• Vue 2 has limited TypeScript support out of the box.

I will go into detail with the first two, so it’s apparent what problem the new API solves.

What is Composition API?

Composition API is a set of APIs that allows us to author Vue components using imported functions instead of declaring options. It is an umbrella term that covers the following APIs:

• Reactivity API, e.g. ref() and reactive(), that allows us to directly create a reactive state, computed state, and watchers.
• Lifecycle Hooks, e.g. onMounted() and onUnmounted(), that allows us to programmatically hook into the component lifecycle.
• Dependency Injection, i.e. provide() and inject(), that allows us to leverage Vue's dependency injection system while using Reactivity APIs.

Composition API is a built-in feature of Vue 3 and is currently available to Vue 2 via the officially maintained @vue/composition-api plugin. In Vue 3, it is also primarily used together with the <script setup> syntax in Single-File Components.

Why the Composition API?

1. Large components can be hard to read & maintain

The primary advantage of Composition API is that it enables clean, efficient logic reuse in the form of Composable functions.

Composition API’s logic reuse capability has given rise to impressive community projects such as VueUse, an ever-growing collection of composable utilities.

Here’s the same component, before and after the refactor into Composition API:

When you organize components by features using the composition API, you’ll be grouping features into composition functions that get called from your setup method, like so:

Using composition API our components can now be organized by logical concerns (also known as “features”). However, this doesn’t mean that our user interface will be made up of fewer components. You’re still going to use good component design patterns to organize your applications:

Now that you’ve seen how the Component API allows you to make large components more readable and maintainable, we can move on to the second limitation of Vue 2.

2. There’s no perfect way to reuse logic between components

Vue 3’s composition API provides us a 4th way to extract reusable code, which might look something like this:

Now we’re creating components using the composition API inside functions that get imported and used in our setup method, where we have any configuration needed.

The good

• We’re writing less code, so it’s easier to pull a feature from your component into a function.
• It builds on your existing skills since you’re already familiar with functions.
• It’s more flexible than Mixins and Scoped Slots since they’re just functions.
• Intellisense, autocomplete, and typings already work in your code editor.

The not so good

• Requires learning a new low-level API to define composition functions.
• There are now two ways to write components instead of just the standard syntax.

Conclusion

The Composition API consists of a number of different Vue.js internals exposed via utility functions. It helps to better organize component code by logical concern and makes it easier to separate component logic from the component template and even reuse that logic across multiple components. Finally, it brings better Typescript support to Vue.js.

I would love to hear some feedback from others about this setup how could I potentially ameliorate it, anything that needs changing or could be done better, etc.