This blog is a part of our “Engineering at Arcana” series, and is written by our Frontend Developer Shrinath Prabhu.

Vue 3 introduced Composition API which allows developers to write components in a better way. Using this API, developers can group the logical pieces of code together, which in turn helps write readable code.

Composition API is a built in feature in Vue 3 and is also available in Vue 2 via @vue/composition-api plugin.

Before Composition API was introduced, Vue 2 was using Options API. While developers can still use Options API in Vue 3, the problem with it is that one single topic would be fragmented across different options such as data() or props, certain methods, some lifecycle hooks (mounted(), created(), and more), and watchers (watch).

With Composition API, you can organise code into smaller logical pieces, group them together, and even reuse them when required.

Let’s see a basic example to understand the difference of coding structure between Options API and Composition API.

This is how our highly logical code looks like in the Options API:

Now the same code can have separation of logic in the Composition API and it’ll look something like this:

Clearly the Composition API code looks a lot cleaner since it can have separation of logic.

The above code can be even more simplified by using the <script setup> syntax, which allows us to get rid of setup method and exports. The following example shows how our code will look like using <script setup>.

The example became even cleaner since it got rid of the export statement, the setup method, and the return statement.

The above syntax is the recommended syntax to be used while using Composition API.

Code reuse with Composition functions

Now let us see how to do code reuse using Composition functions. Before Composition API was introduced, developers were using the concept of mixins. A mixin is just a simple javascript which contains some vue options with some reusable logic that can be reused across multiple components.

Let’s checkout how a mixin looks like.

Now let us see how we can use this mixin into our code:

Basically, we can use the mixins option of Vue to use all the mixins that we have created. Looks good right? But there are few problems with this approach.

• Property name conflicts can occur as properties from each mixin are merged into the same component.
• It isn’t necessarily apparent which properties came from which mixin if a component uses multiple mixins.
• It’s impossible to pass parameters to the mixin to change its logic which drastically reduces its flexibility.

These problems can be addressed using Composition API. So let us look at the same example using Composition API.

Now let us see how we can use this in our code.

As you can see, it solves the problems that we discussed above:

• We no longer have property name conflicts since we can encapsulate methods in a single object. We can also create multiple objects of same type and each object will be responsible for maintaining its own state.
• We have a clear understanding of which properties emerged from which composable even if the component uses multiple composables.
• We can even pass the parameters to the composables.
• As you can see, Composition API also eliminates the use of this keyword, so we can use arrow functions more effectively.

What does Composition APIs expose?

According to Vue’s official documentation, Composition API exposes the following APIs:

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

Advantages of Composition APIs

The major advantages of using Composition APIs according to Vue’s official documentation are:

• Better logic reuse.
• More flexible code organisation.
• Better Type interface as Vue 3 is written in Typescript.
• Smaller production bundle and less overhead.

Disadvantages of Composition APIs

Here are a few disadvantages of using Composition APIs.

• A lot of Vue-based frameworks such as Nuxt and Vuetify still rely on Options API and have no support for Composition API (at the time of writing this article). Though these frameworks have beta support and third-party libraries for supporting Vue 3, they don’t have a stable release as of now. In such cases, it’s better to stick to Options API as it makes more sense.
• There might be confusion between ref()and reactive(), and beginners especially might get confused about when to use those and how exactly those differ from each other.
• There is no support for options such name and inheritAttrs in Composition API. The workaround for this is to create a new script tag that uses Options API and use these options if required.

First-class Typescript support

As mentioned in the advantages, Vue 3 is written in Typescript and has first-class support for Typescript. You can type check all the pieces of component, such as props, refs, reactive, computed, and emits using Composition API with Typescript. Moreover, Vue 3 has exposed all the required interfaces for using it with Typescript.

Learn more about the usage with Typescript here.

Options API vs Composition API

Following image is an example of a larger codebase that have multiple features in a component and different colours are used to indicate different logical pieces.

As you can see, the code looks more organized while using Composition API.

Conclusion

You can still use Options API; but for larger codebases, it’s best to use Composition APIs for all its advantages. For smaller projects or if your projects use dependencies that use Vue 2 (e.g. Nuxt, Vuetify, etc), you can use Options API. You can even use Options API along with Composition API but stick to Composition API wherever possible as it’ll help in the long run.

Want to know more about our latest testnet features? Book a demo.

Book a Demo

Official Links: Website | Twitter | Discord| Telegram | TG Announcement | Medium | GitHub