Vue3 Composition Api Props

Posted on  by admin
In this tutorial, we’ll explore how to use the Vue 3 Composition API and its latest code reusability capabilities.

Code sharing and reusability are one of the cornerstones of software development.

Since the earliest days of programming, the problem of code repetition has made programmers invent strategies for keeping their code DRY, reusable and portable.

As time has passed, these strategies have been constantly polished and improved, and new ones are constantly developed. This applies equally to Vue as to other programming languages and frameworks.

As the Vue framework has evolved, it it has continued to offer much better reusability approaches.

Let’s consider what makes a piece of code reusable.

For me, there are three main principles of reusability:. Code abstraction. A piece of code is abstract when it can suit multiple different use cases (like classes in many programming languages).

Code portability. A piece of code is portable when it can be used not only in different places in one project but also in different projects.

Code decoupling (or loose coupling).

A piece of code is decoupled from another one when changing one doesn’t require changing the other.

They’re as independent of each other as possible. Of course, complete decoupling is impossible — which is why the more accurate term used by developers is “loosely coupled”.

The Composition API is a new strategy for building and structuring Vue 3 components. It incorporates all of the three principles described above and allows for creating abstract, portable, and loosely coupled components that can be reused and shared between different projects.


When I found Vue for the first time, I was hooked by its Options (object-based) API. It seemed to me way more clear and elegant in contrast to the Angular and React equivalents.

Everything has its own place and I can just put it in there.

Boussadjra BrahimBoussadjra Brahim

Not the answer you're looking for? Browse other questions tagged vue.jsvuejs3vue-composition-apivue-mixin or ask your own question.