What is the Composition API? (Vue 3)

The Composition API is the biggest new feature that appeared with the release of Vue 3. But what is the Composition API?

⬇ Chapters: ⬇
0:00 Introduction
0:48 Group Relevant Code Together
2:57 Reuse Code Easily (Composables)

The Composition API gives us a new way to create Vue Components - an alternative to the Options API.

We can still use the Options API in Vue 3, however I would consider using Composition API exclusively, especially on more complicated Vue apps and Vue Components.

The Composition API solves two main problems that we can encounter with the Options API, especially on larger apps:
- 1. It allows us to group relevant code together more easily in the script sections of our Vue components
- 2. It allows us to reuse our code across components more easily (using composables)

[MakeAppswithDanny]

Please Like, Share, Subscribe & Comment - it all helps me create more content for you!

[VolkunSports]

you nailed the concept when masked the code for clarity.

[jobnigussie]

Danny, you're the best teacher 👍👍👍👍

[davidpile]

Thanks Danny. Nice little into to composables

[aspirinemaga]

In Vue 1 and 2 we've learned how to properly distribute and have organized chunks of code across the SFC (.vue). In Vue3 Composition API we are trying to forget about that and smash them together. Simplicity and well organized code was the root why I stayed with vue when it was 0.1v

[Huntmare]

Thank you for the video, great as always ! love your courses also !!

[dekebaoe]

Awesome as always, 👍
Thank you Danny

[medslk]

thank you, you explained the concept really well

[CCDevYt]

Danny if you would not mind. Make a informational video about Vue Router 4 too. Thank u :)

[universecode]

The composition Api is a game changer for Vue.js 🔥 Nice Danny ✌🏻

[-Will-]

Really nice demo of why composition api is worth using.

[nickoquiamco]

does the composition API and options API have a difference in terms of performance ?

[eberguerra]

Siento que los composables aumentan la cantidad de archivos, y si se reducen en un archivo pero al final van a crecer en otros, la manera en la que estaban antes estructurados tenía un enfoque donde sabias donde podía encontrar todo, no se no me gusta mucho el nuevo estilo 😅

[jofftiquez]

I'm a bit iffy about the multiple onMounted hooks, wouldn't it be weird that way? I mean I'm totally down for it if it is, I just don't know if it's "normal" thanks.

[Tarabass]

Only opinion. What about performance, testing, migration, schooling.

[saeed]

Thanks for the clear, concise explanation and easy-to-follow examples.

[dipanshu]

great video! One question, why would you want to use a state management system like Pinia when simply using a composable/composition api state management? I had built a small app, which I used the composition apis state system and its easy and intuitive to work with, I have no experience with Pinia but for my purpose, I never really felt I needed a separate state management system, so in what cases I might want to use it?

[salva-dev]

Thanks for your videos (and your great courses), Danny. This video has made me think that maybe we should also use Composition API in vue 2 (and quasar v1) developments in my team in order to migrate easily (we're going to migrate to vue 3 but we must support IE11 this year 😓 ) . Do you think the same?

[MrBotv]

Danny, you look tired. Take care of yourself. Thx 4 info.

[James-licm]

this honestly looks more complicated...

the only good thing it does is allow you to block your code out...

my recommendation instead is:

make smaller components
use service classes for reusable code.