Alex Kyriakidis

Vue.js 3 is just around the corner and along with many exciting improvements it introduces a new, function-based API to design components, called Composition API.

In this talk, the attendees will get an overview of the new Composition API and learn how they can use it to improve code quality and reusability.

Motivation for Composition API:
We all love how Vue is very easy to pick up and makes building small to medium scale applications a breeze. But today as Vue’s adoption grows, many users are also using Vue to build large scale projects – ones that are iterated on and maintained over a long timeframe, by a team of multiple developers. Over the years we have witnessed some of these projects run into the limits of the programming model entailed by Vue’s current API. The problems can be summarized into two categories:

The code of complex components become harder to reason about as features grow over time. This happens particularly when developers are reading code they did not write themselves. The root cause is that Vue’s existing API forces code organization by options, but in some cases it makes more sense to organize code by logical concerns.
Lack of a clean and cost-free mechanism for extracting and reusing logic between multiple components.

The APIs proposed in this RFC provide the users with more flexibility when organizing component code. Instead of being forced to always organize code by options, code can now be organized as functions each dealing with a specific feature. The APIs also make it more straightforward to extract and reuse logic between components, or even outside components. We will show how these goals are achieved in the Detailed Design (https://vue-composition-api-rfc.netlify.com/#detailed-design) section.

You can find the details for composition api in the RFC page (https://vue-composition-api-rfc.netlify.com/#summary).