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
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!!
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.
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.
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.
Excellent tutorial sir! I appreciate the speed with which you present concepts while keeping it understandable with demonstration. Keep up the good work!
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 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.
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...
Thanks for the kind words Luca. All your concerns are explained in my Composition API Tutorial series: ruclips.net/p/PLAiDzIdBfy8jr-ccMU8ymPn7o85RAZ_6T
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.
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
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.
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
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.
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.
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.
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.
@@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.
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.
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.
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 👍
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: [], },
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
@@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.
![Vue 3 Composition API Introduction [FULL TUTORIAL]](http://i.ytimg.com/vi/bwItFdPt-6M/mqdefault.jpg)
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
>> DONT CLICK THIS: dannys.link/dontclick
Ok, I didn't... LOL
@@BenHayat 😂
Watching this in Sept 2024, and this series is really very helpful! Thank you so much!
Glad it was helpful! 👍
One of the better explanations of the Composition API. It's really useful to see the comparison with the Options API.
Glad you think so Eric!
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!!
Thanks Andrew. Glad it was helpful! 👍
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.
Thanks Alexander! 👍
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.
Wow thanks! 👍
Very nicely explained everything about options and composition api. ❤
Thanks Atif!
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.
Thanks, that's a good suggestion 👍
@@MakeAppswithDanny Caveat: Documentation says destructuring within setup() could break reactivity. I need to try this out and give a feedback.
thank you for the tutorial , it was so easy to understand with both examples.
Glad it was helpful!
Very straightforward and entertaining! It seems Vue2 and knockout had a baby.
Thanks Charlie. I never used Knockout...
This is a awesome comparison about option-api and composition-api, thank you Danny ! 😀
Glad you liked it, Mask Man!
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.
Thanks much appreciated!
Very good comparison. I really prefer the original options way of doing things and spent a lot of time learning it!!
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.
Excellent tutorial sir! I appreciate the speed with which you present concepts while keeping it understandable with demonstration. Keep up the good work!
Glad it was helpful!
I think this is the video I was looking for. Reading documentation would not make this clear.
Thanks Md! 👍
Great tutorial, easy to understand and concise.
Thanks Anaxarchos!
You got a like from me because of how funny you found your own joke with the swear words.
😂
Learned not only Vue but also some swear words from this tutorial. Thank you!
Haha! Just don't say them in front of your family...
Please come up with a course on utilising the power of TypeScript using vue 3
Yes please Danny
Thanks guys. I'll consider it!
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.
Really? Can you please post the whole of your script section where you are using that (this.)?
@@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.
@@MakeAppswithDanny I have posted the same and the script in your latest video on the same subject.
Short and informative, that's why I am happy here :)
keep it up! ✊
Thanks Mostafa! 👍
Very helpful video, thanks! You're a great speaker, good pace, thorough and accurate.. and got a little laugh in there too
Thanks Jason!
Excellent video. Keep it up💖
Thanks Rejowan!
Great channel! Keep up the great work Danny!
Thanks Mike!
Clearly explained ❤️❤️❤️ thank you dear
Glad it was helpful Susanth!
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...
Thanks for the kind words Luca. All your concerns are explained in my Composition API Tutorial series: ruclips.net/p/PLAiDzIdBfy8jr-ccMU8ymPn7o85RAZ_6T
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.
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
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
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.
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.
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
Thanks a lot , that's a great video!
You are welcome!
Incredible
Thanks James 👍
Great video bro.thanks a lot
Thanks Aswin!
Hi Danny thanks your work help me a lot (from Paris)
Great to hear!
Simple but awesome
Thanks 👍
Awesome as usual, Danny! Thanks!
Thanks Curtis!
Willy made my day :D
😂
Great one!
Thanks! 👍
love your laugh bro,I pray you keep laughing and smiling like this.
Thanks Muhammad! 👍
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.
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.
What colour scheme is that sir? Thanks for the helpful vid
Thanks Bert! It's the Make Apps Theme: marketplace.visualstudio.com/items?itemName=dannyconnell.make-apps-theme
Made my day! Thanks a lot
Glad to hear that!
Great GREAT great!
Thanks Danny
Thanks Basar!
Hi Danny, do you create Quasar apps in Typescript? What do you think to develop with Typescript too? Thank you
I haven't used Typescript so far. 👍
Awesome! Is there any advantage on using ref or reactive over the other? idk, but ref seems more fancy to me...
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.
Hey Danny, hope you are doing great. Nice explanation as always. Can you upload this to a github repo? Thank you
Thanks Stefano!
great example with swear words, I had a lot of fun ))) Thank you!
😂
So Danny, what is the benefit of going with composition API? The option API structure seems more organized. Why should we switch?
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.
@@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.
@@BenHayat sounds sensible. The “VueJS 3: Composition API for State Management (Vuex Killer?)” video will be out on Wednesday. 👍
Love your laugh 😂😂😂. Awesome 🤣🤣
Thanks! I love that humor. Buy bananas, Eat bananas, Poo bananas!🤣
Thanks Dwars!
so, we can just start using the syntax without installing it?
Sure, if it's a Vue 3 project. If it's a Vue 2 project, you need to install the composition API polyfill 👍
Any reason you used a computed property just to return the length of the array?
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.
awesome as always :-)
Thanks man!
hilariously informative! nice :)
Thanks Erhan 👍
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.
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 👍
Vue 2 out of support end 2023 :)
Composition API is more Javascript Approach than Options API and it's obviously easier to follow and code. I think you should rethink that
Cool! Especially - butt hair.
😂
:) thanks
Thanks Gergely!
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: [],
},
I'm not sure about that Mauro. Best of luck 👍
I understand the composition API, I don;t TRULY understand where or why should I be using it... I feel like a willy..........
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
Thumbs up for the laughing alone
😂
@@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?
@@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.
I laughed before he did. Reminded me of kindergarten kids, exchanging their dirtiest swear words.
Who is Willy?
😂
Am I the only one wondering why you were laughing? LOL
Hmm
Hmm...
Give me a shout when... ;-)
Hey R&B. 10 minutes!
I didn't know 'fart' was a swear word.
😂
so childish lol great stuff!!
😂
Stop those bad people! 😹
😂
no source?
🤣🤣🤣🤣
btw your Fudget site is not https