Vue 3 introduces us to the Composition API, something aimed at addressing code reuse and maintainability in VueJS apps. Here’s a quick overview and some advice on how to structure your code.

Vue 3 is here! And with it comes the much-talked-about  Composition API which aims to address the current difficulties with code reuse in VueJS applications.

I say “code” reuse specifically, as opposed to “component” reuse, as component reuse has always been possible with entirely self-contained components. The Composition API, however, gives developers the ability to separate code (functionality) from the components themselves (presentation).

Of course, we’ve always been able to create some level of separation between functionality and presentation with the use of  Vuex. However, Vuex requires us to keep the functionality close to where the main store is defined and is often, in my opinion, abused.

Vuex is primarily a state store, yet developers use it as a quick way of sharing state and actions that is only required by one or two components and therefore do not need to be global.

React developers will be familiar with this concept, as the Composition API is similar to React Hooks in what it tries to achieve (although I’m taking the word of other developers on this, as I have little to no experience with React Hooks).

#javascript #vuejs #web-development