What is the Composition API? (Vue 3)

[@MakeAppswithDanny]

Please Like, Share, Subscribe & Comment - it all helps me create more content for you! 👉 Vue 3 Composition API Course: dannys.link/compositionapi 👉 My Courses: dannys.link/courses 👉 Download Fudget: www.fudget.com 👉 My VSCode Setup: dannys.link/vscodesetup 👉 DONT CLICK THIS: dannys.link/dontclick

[@VolkunSports]

you nailed the concept when masked the code for clarity.

[@MakeAppswithDanny]

Thanks 👍

[@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

[@evolutionx1]

Options should be the default and Composition only used for rare cases where you can't do it with Options.

[@aspirinemaga]

@@evolutionx1 that's absolutely right. I should be glad for still being able to use options api in vue3 anyway

[@MakeAppswithDanny]

@@aspirinemaga good points guys. I felt the same way at first. I really didn’t like Composition API at first. But after spending 12 months working on a complicated app with it, I will NEVER go back 👍

[@stefanonesi8712]

@@MakeAppswithDanny I'm still in the stage where i hate composition API. But, i know that i'll eventually switch to Composition anytime soon, and convert options to composition is really boring, so...

[@MakeAppswithDanny]

@@stefanonesi8712 Check out my Vue 3 Composition API series it might change your mind: kzbin.info/aero/PLAiDzIdBfy8jr-ccMU8ymPn7o85RAZ_6T

[@davidpile2576]

Thanks Danny. Nice little into to composables

[@MakeAppswithDanny]

Thanks David!

[@medslk9753]

thank you , you explained the concept really well

[@MakeAppswithDanny]

You're welcome 👍

[@0-Will-0]

Really nice demo of why composition api is worth using.

[@MakeAppswithDanny]

Thanks Will. Yeah I thought it was needed. I haven’t seen a good explanation of why the flip I should switch to it anywhere. It’s only through using it to create a complex app that I finally see the benefits 👍

[@dekebaoe]

Awesome as always, 👍 Thank you Danny

[@MakeAppswithDanny]

Thanks Basar! 👍

[@universecode1101]

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

[@MakeAppswithDanny]

Definitely. Especially since Script Setup! 👍

[@CyrilViXP]

Fixes the problem that never existed

[@Huntmare]

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

[@MakeAppswithDanny]

Thanks a z! 👍

[@nickoquiamco978]

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

[@MakeAppswithDanny]

I’m not sure, but the the Vue 3 codebase has some indications that it’s more optimised for Composition API than Options API. I talked about this in one of my other videos 👍

[@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.

[@MakeAppswithDanny]

It's up to you. You can have a single onMounted if you like, and put all your logic in there. Or use multiple, to separate concers.

[@dipanshu2207]

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?

[@bartduisters3455]

If you want a similar approach to what you have been using, but also want Vue Devtools integration. Which allows for 'time traveling', which means you can see what your frontend looks like with different states. It also allows you to edit the state directly from the plugin and see the result live. If you have a small application and feel no need for the Vue Devtools functionality, you are probably just fine with the composition approach.

[@MakeAppswithDanny]

Yes like Bart said. The only real benefit is debugging capabilities (via Vue Devtools) 👍!

[@dipanshu2207]

Great, thanks guys

[@CCDevYt]

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

[@MakeAppswithDanny]

I will be covering Vue Router 4 in the full course, Clint! And also a bit here on KZbin. 👍

[@Viktorres1]

Thanks Danny from your Udemy student)

[@MakeAppswithDanny]

My pleasure!

[@saeed17]

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

[@MakeAppswithDanny]

Thanks Saeed!

[@eberguerra3002]

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 😅

[@MakeAppswithDanny]

Ése es un punto razonable. 👍

[@bobobobo-ki2fw]

Thank you.

[@MakeAppswithDanny]

You're welcome!

[@hakimov_dev]

Awesome bro )

[@MakeAppswithDanny]

Thanks Hakimov!

[@tanzimibthesam5861]

Will course be available at Udemy?

[@MakeAppswithDanny]

Yes it will Tanzim

[@FloodGold]

Okay hurry up ha just kidding - I'll get anything you create whenever you make it available.

[@MakeAppswithDanny]

@@FloodGold haha. Keep an eye on KZbin today around 12pm 👍

[@TyronC199]

Sold

[@MakeAppswithDanny]

Me too! 👍

[@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?

[@MakeAppswithDanny]

I don't know, I guess you need to look at how long it would take to switch over, and whether it's financially worthwhile at this point. But if time & money are not obstacles, I would say go for it 👍

[@punithgowda6723]

Cool

[@MakeAppswithDanny]

Thanks Punith!

[@bharathhs1161]

Always options api

[@Tarabass]

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

[@adriatic123]

Options API is not RIP but well and prospering. Composition API is a fad, syntactic sugar without a single benefit (for example in code execution speed and size). More and more programmers realize that, while they are forced by their managers to be 'more modern'. I immediately know that such manager doesn't have the basic knowledge about Vue.

[@MrBotv0091]

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

[@MakeAppswithDanny]

Yeah not been sleeping much lately. Been going through a separation while recording this course … 🙁

[@flogginga_dead_horse4022]

@@MakeAppswithDanny sorry to hear that!! I know what you mean!!

[@MrBotv0091]

@@MakeAppswithDanny This one sucks. Hold on, bro, your students are with you!

[@alexlytle089]

I personally prefer the options API. Its simple easy to use

[@MakeAppswithDanny]

I know what you mean, Alex. I felt the same way for a long time. Look out for my Composition API series starting very soon. It may just change your mind a little bit 👍

[@alexlytle089]

@@MakeAppswithDanny Thanks Danny looking forward to it.

[@James-li8cm]

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.

[@hakimov_dev]

First like me )

[@MakeAppswithDanny]

😂

[@UwU-dx5hu]

This looks a lot like react😂

[@MakeAppswithDanny]

Does it? 👍

[@flogginga_dead_horse4022]

one of a few things that ruined Vue for me...

[@MakeAppswithDanny]

😂 I know right. I HATED Composition API for a while. It really annoyed me. Love it now though, after creating a big app with it 👍

[@flogginga_dead_horse4022]

@@MakeAppswithDanny I don't like all the "refs" and such. Also have a big application that used BootstrapVue and that project died at version 2. Even Vuetify still doesn't work with 3, luckily Quasar does!!!

[@flogginga_dead_horse4022]

@@MakeAppswithDanny Hello, I just wanted to revisit this comment. I totally hated composition even after reading many things about it and looking at other training. After going half way through your Udemy class you have totally changed my mind!! I never saw it compared so well to options. It really does scale better. On the other hand it's like a completely different version of Vue and it's like starting over. I wish this was how it was done to begin with. Also I have a large project using Vuex and to have Pinia suddenly be the best practice is kind of annoying. Some of the decisions Evan makes have really messed up my projects. Another example is VueCLI and UI seemed like a really good way to manage projects and seemed like the standard and then along comes Vite and makes it all obsolete. All these changes make it nearly impossible to write apps without immediate technical debt. Sorry to write a novel. Enjoying your course!!

[@MakeAppswithDanny]

@@flogginga_dead_horse4022 Glad to hear you are starting to enjoy Composition API. I know, the changes are annoying, but that's just the bummer that comes with all tech, it's always changing. It took me 3 days to convert Fudget 2 over to Pinia (instead of Composable State Management). 👍

[@raghavendra6978]

thank you!

[@MakeAppswithDanny]

You're welcome!