Vue JS 3: Composition API vs Options API - Same App in Both!

[@MakeAppswithDanny]

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

[@BenHayat]

>> DONT CLICK THIS: dannys.link/dontclick
Ok, I didn't... LOL

[@MakeAppswithDanny]

@@BenHayat 😂

[@yogeshv6799]

Watching this in Sept 2024, and this series is really very helpful! Thank you so much!

[@MakeAppswithDanny]

Glad it was helpful! 👍

[@ericdelacruz2602]

One of the better explanations of the Composition API. It's really useful to see the comparison with the Options API.

[@MakeAppswithDanny]

Glad you think so Eric!

[@danuzonez]

Very nicely explained everything about options and composition api. ❤

[@MakeAppswithDanny]

Thanks Atif!

[@SAIEN333]

thank you for the tutorial , it was so easy to understand with both examples.

[@MakeAppswithDanny]

Glad it was helpful!

Whenever I find a Vue video from you I like before I watch because I know it will be gold. Thank you for helping me become a better developer.

[@MakeAppswithDanny]

Wow thanks! 👍

[@andrewking1173]

I was so confused when some tutorials used the Options API and others used the Compositions API. This video was so helpful in showing that while they are syntactically different, they can do the exact same things. Thank You!!

[@MakeAppswithDanny]

Thanks Andrew. Glad it was helpful! 👍

[@alexanderpoplawski577]

Love your videos. They are fast paced and waste no time in endless speeches. I took your Quasar course on Udemy and can highly recommend it. Helped me a lot with a project where I had to make an Android app for a Zebra scanner and decided to use Quasar.

[@MakeAppswithDanny]

Thanks Alexander! 👍

[@mostafashawki]

Short and informative, that's why I am happy here :)
keep it up! ✊

[@MakeAppswithDanny]

Thanks Mostafa! 👍

[@maskman4821]

This is a awesome comparison about option-api and composition-api, thank you Danny ! 😀

[@MakeAppswithDanny]

Glad you liked it, Mask Man!

[@bryanthompson1070]

Excellent tutorial sir! I appreciate the speed with which you present concepts while keeping it understandable with demonstration. Keep up the good work!

[@MakeAppswithDanny]

Glad it was helpful!

[@CharlieKnoll]

Very straightforward and entertaining! It seems Vue2 and knockout had a baby.

[@MakeAppswithDanny]

Thanks Charlie. I never used Knockout...

[@rejowanahmed6819]

Excellent video. Keep it up💖

[@MakeAppswithDanny]

Thanks Rejowan!

[@jasonfetterly5578]

Very helpful video, thanks! You're a great speaker, good pace, thorough and accurate.. and got a little laugh in there too

[@MakeAppswithDanny]

Thanks Jason!

[@676005ga]

Thanks for making this concise introduction of composition API, I finally understand what it is. I enjoy your Vuetify course and I hope to see this channel's growth, so you could create more content.

[@MakeAppswithDanny]

Thanks much appreciated!

[@Anaxarchos]

Great tutorial, easy to understand and concise.

[@MakeAppswithDanny]

Thanks Anaxarchos!

[@mikepecha8527]

Great channel! Keep up the great work Danny!

[@MakeAppswithDanny]

Thanks Mike!

[@leonlee9518]

Thanks a lot , that's a great video!

[@MakeAppswithDanny]

You are welcome!

[@pankajarora2500]

Willy made my day :D

[@MakeAppswithDanny]

😂

[@curtisschleich]

Awesome as usual, Danny! Thanks!

[@MakeAppswithDanny]

Thanks Curtis!

[@aswinpreman907]

Great video bro.thanks a lot

[@MakeAppswithDanny]

Thanks Aswin!

[@_ndiana]

Thank you for the video. Just to add that you could destructure `newTodoName` and `todos` from `data` while returning it from `setup()` so that you do not have to include `data` in the template. Well done.

[@MakeAppswithDanny]

Thanks, that's a good suggestion 👍

[@_ndiana]

@@MakeAppswithDanny Caveat: Documentation says destructuring within setup() could break reactivity. I need to try this out and give a feedback.

[@SusanthCom]

Clearly explained ❤️❤️❤️ thank you dear

[@MakeAppswithDanny]

Glad it was helpful Susanth!

[@franckrichard9812]

Hi Danny thanks your work help me a lot (from Paris)

[@MakeAppswithDanny]

Great to hear!

[@nafisnawalnahiyan5032]

Simple but awesome

[@MakeAppswithDanny]

Thanks 👍

[@tomzorz88]

Great one!

[@MakeAppswithDanny]

Thanks! 👍

[@mikemcgrumpy]

You got a like from me because of how funny you found your own joke with the swear words.

[@MakeAppswithDanny]

😂

[@flogginga_dead_horse4022]

Very good comparison. I really prefer the original options way of doing things and spent a lot of time learning it!!

[@MakeAppswithDanny]

I was very resistant to the Composition API at first, but now I'm starting to get into it. I'm using it throughout Fudget 2.

[@muhammad7238]

love your laugh bro,I pray you keep laughing and smiling like this.

[@MakeAppswithDanny]

Thanks Muhammad! 👍

[@ferransanchez7422]

Made my day! Thanks a lot

[@MakeAppswithDanny]

Glad to hear that!

[@truthteachers]

Hi Danny, at 21.12 timestamp, you said using the word "this" will not work from code in Options Api but it works. I copied the code as is and it worked fine. I guess things have since this date of this video.

[@MakeAppswithDanny]

Really? Can you please post the whole of your script section where you are using that (this.)?

[@truthteachers]

@@MakeAppswithDanny Its hard to post it here. Its the same script you show in the video. Suggest you do the same course yourself and when you arrive at timestamp 21.02, do not remove the "this" word. Then test. It will not complain , it will work. Please use the latest vue/cli (mine is version 5) and vue js.

[@truthteachers]

@@MakeAppswithDanny I have posted the same and the script in your latest video on the same subject.

[@hongqiwang988]

Learned not only Vue but also some swear words from this tutorial. Thank you!

[@MakeAppswithDanny]

Haha! Just don't say them in front of your family...

[@dekebaoe]

Great GREAT great!
Thanks Danny

[@MakeAppswithDanny]

Thanks Basar!

[@lucapassani1129]

Very nice video. I like the content/time ratio, the tempo. I am not planning to use the composition API but this is certainly useful to decode examples written that way by other programmers. I bookmarked this video for future reference. Thank you for taking the time to create it.
What's the rationale for using composition over option API in your opinion? I am wondering why Vue authors felt the need to create an additional API that does the same things and can potentially be very confusing...

[@MakeAppswithDanny]

Thanks for the kind words Luca. All your concerns are explained in my Composition API Tutorial series: ruclips.net/p/PLAiDzIdBfy8jr-ccMU8ymPn7o85RAZ_6T

[@dwarslopers]

Thanks! I love that humor. Buy bananas, Eat bananas, Poo bananas!🤣

[@MakeAppswithDanny]

Thanks Dwars!

[@rangabharath4253]

awesome as always :-)

[@MakeAppswithDanny]

Thanks man!

[@erhanturan]

hilariously informative! nice :)

[@MakeAppswithDanny]

Thanks Erhan 👍

[@katteos]

Hey Danny, hope you are doing great. Nice explanation as always. Can you upload this to a github repo? Thank you

[@MakeAppswithDanny]

Thanks Stefano!

[@jamesconant6567]

Incredible

[@MakeAppswithDanny]

Thanks James 👍

[@lekhoi8]

Excellent tutorial as always, why do we want to use ref() if the reactive data object will do. That is what is the use case for ref() ? Thanks

[@MakeAppswithDanny]

Well, if you only have one item of data within a particular bit of functionality, it might make sense to use a ref rather than an object.

[@zahid.messenger]

I think this is the video I was looking for. Reading documentation would not make this clear.

[@MakeAppswithDanny]

Thanks Md! 👍

[@bertrodgers2420]

What colour scheme is that sir? Thanks for the helpful vid

[@MakeAppswithDanny]

Thanks Bert! It's the Make Apps Theme: marketplace.visualstudio.com/items?itemName=dannyconnell.make-apps-theme

[@rangabharath4253]

Love your laugh 😂😂😂. Awesome 🤣🤣

[@bloomtech1085]

Hi Danny, do you create Quasar apps in Typescript? What do you think to develop with Typescript too? Thank you

[@MakeAppswithDanny]

I haven't used Typescript so far. 👍

[@k.santiagodiaz3744]

Awesome! Is there any advantage on using ref or reactive over the other? idk, but ref seems more fancy to me...

[@MakeAppswithDanny]

I'm not sure to be honest, though reactive is a bit less fiddly as we don't need to use .value. Whether there is any performance difference between the two, I'm not sure.

[@MauroSSosa]

How can I maintain the structure using asyncComputed by vue-async-computed lib in vue3 with OptionsApi?
asyncComputed: {
items: {
async get() {
return await fetch(...);
},
default: [],
},

[@MakeAppswithDanny]

I'm not sure about that Mauro. Best of luck 👍

[@SusanthCom]

Please come up with a course on utilising the power of TypeScript using vue 3

[@lekhoi8]

Yes please Danny

[@MakeAppswithDanny]

Thanks guys. I'll consider it!

[@vishny84]

great example with swear words, I had a lot of fun ))) Thank you!

[@MakeAppswithDanny]

😂

[@pagevpetty]

so, we can just start using the syntax without installing it?

[@MakeAppswithDanny]

Sure, if it's a Vue 3 project. If it's a Vue 2 project, you need to install the composition API polyfill 👍

[@BenHayat]

So Danny, what is the benefit of going with composition API? The option API structure seems more organized. Why should we switch?

[@MakeAppswithDanny]

Good question. It’s something I’m still trying to figure out. Supposedly it’s for large scale applications where you have components with multiple functionalities. Composition API would allow you to keep all of the data, computed properties, methods from each functionality together (instead of scattered across the various objects in the options API). But what I don’t get is- if your app and components are that complicated, then you should probably be using some kind of global state management anyway - in which case most of the data and logic would be moved out of the components. However one obvious benefit that springs to mind, is that you don’t need to make all of your data reactive. As I showed with the swearwords array - in the Options API example - this array was reactive - when it didn’t actually need to be. I imagine there is a performance cost to this. Whereas in the Composition API example, we didn’t need to make this array reactive.

[@BenHayat]

@@MakeAppswithDanny
Great answer and logic.
Can't wait to see your video on using Composition API than Veux.
BTW, based on your suggestion, I went ahead and decided my app's data will be manged by Vuex, and the actions will call methods in ApiServices layer which does all the Axios calls. This way Vuex does not do any direct Axios calls. Plus I can reuse the methods in ApiServices.

[@MakeAppswithDanny]

@@BenHayat sounds sensible. The “VueJS 3: Composition API for State Management (Vuex Killer?)” video will be out on Wednesday. 👍

[@mrjiggawatt]

I’m new to Vue and this is amazingly clear. However, I don’t really understand why you might choose the composition api over the option api or vice versa.

[@MakeAppswithDanny]

That's a deep question, but basically you have a lot more flexibility with the Composition API. Check out my Composition API series for further clarification on the benefits: ruclips.net/video/3B0ry4GI1cE/видео.html

[@michaelpumo83]

Any reason you used a computed property just to return the length of the array?

[@MakeAppswithDanny]

This was explained in the video. I just did this so that I could demonstrate how computed properties differ in Options API & Composition API - not because it was necessary.

[@zombaju]

I don't know what the difference is between ref and reactive. It seems to me that reactive is a good idea when you have more stuff and want to keep it in one place. But there is one subject: in the images, i.e. , there is an attribute ref and to it you have to assign a value from ref, not from reactive because there will be an error. I noticed this while working with Tensorflow, when I wanted to use object detection from an image. I don't know why this happens. Therefore in . Magic.

[@MakeAppswithDanny]

Yes, refs that you assign to dom elements (to do something with the dom) need to be refs. But aside from these, refs are for simple variables, maybe string, or boolean and reactive are for objects. So if you had form data for a number of fields, you would probably put this in a reactive object. But if you had a standalone boolean variable, you would probably use a ref.

[@pedroprt007]

Excellent tutorial as always.
I can't see a reason to move from options api to composition api. I think composition api is just a more complicated way of doing the same thing we do easily with options api.

[@MakeAppswithDanny]

I used to think so too. Keep an eye out for my forthcoming course "Vue 3: Composition API (with Pinia & Vite)" and my forthcoming RUclips series "Vue 3 Composition API Tutorial Series" and a few other videos I have coming. They might just change your mind a bit 👍

[@mikey7673]

Vue 2 out of support end 2023 :)

[@rejowanahmed6819]

Composition API is more Javascript Approach than Options API and it's obviously easier to follow and code. I think you should rethink that

[@raymondflowers1473]

Composition API is most likely better than options so I think I might learn it first because of its ability to handle higher complexity according to what I've read online.

[@MakeAppswithDanny]

Yes, you don't necessarily need to learn Option API first. Check out my Vue 3 Composition API Tutorial Series: ruclips.net/p/PLAiDzIdBfy8jr-ccMU8ymPn7o85RAZ_6T

[@GergelyCsermely]

:) thanks

[@MakeAppswithDanny]

Thanks Gergely!

[@gotechkey1185]

Am I the only one wondering why you were laughing? LOL

[@dimitry5479]

Cool! Especially - butt hair.

[@MakeAppswithDanny]

😂

[@EduardoDonato82]

Who is Willy?

[@MakeAppswithDanny]

😂

[@flogginga_dead_horse4022]

so childish lol great stuff!!

[@MakeAppswithDanny]

😂

[@HowardBuksbaum]

Thumbs up for the laughing alone

[@MakeAppswithDanny]

😂

[@HowardBuksbaum]

@@MakeAppswithDanny Love your videos dude! Hey can you do a video on centering a grid in Quasar where the last row of items is left aligned?

[@MakeAppswithDanny]

@@HowardBuksbaum hey Howard. I replied to your tweet. Won’t it be neater to have all rows left aligned? Otherwise the last row with one item won’t be aligned with the cantered rows above.

[@alexanderpoplawski577]

I laughed before he did. Reminded me of kindergarten kids, exchanging their dirtiest swear words.

[@eliranmauda]

I understand the composition API, I don;t TRULY understand where or why should I be using it... I feel like a willy..........

[@MakeAppswithDanny]

Now that I'm used to it, I use it exclusively. In Fudget 2, I haven't used the Options API at all. This explanation might help: ruclips.net/video/_wAW8_9h2FQ/видео.html

[@antoniofuller2331]

Hmm

[@MakeAppswithDanny]

Hmm...

[@rickybarabba7866]

Give me a shout when... ;-)

[@MakeAppswithDanny]

Hey R&B. 10 minutes!

[@pagevpetty]

Stop those bad people! 😹

[@MakeAppswithDanny]

😂

[@FitLife6767]

I didn't know 'fart' was a swear word.

[@MakeAppswithDanny]

😂

[@ontwikkelfabriek]

no source?

[@ontwikkelfabriek]

btw your Fudget site is not https

[@piuschris]

🤣🤣🤣🤣