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

In this video I’m gonna show you how to use Vue JS 3 to create the same Todo app in both the Options API & in the Composition API!

Intro & Setup:
0:00 Introduction
1:00 Getting Started
2:35 Setup Pages & Routes

Options API:
3:46 Options API
4:09 Design
6:19 Setup Array for Todos
8:10 "Add a Todo" Method
10:01 "Delete a Todo" Method
11:13 Computed Properties
12:15 Watchers

Composition API:
14:50 Composition API
15:11 Template
15:32 Setup Method
16:09 Data with Refs
19:30 "Add a Todo" Method
22:18 "Delete a Todo" Method
23:43 Computed Properties
25:24 Watchers
27:47 Reactive Objects

This will help us to understand the differences to the two approaches - and help you to get started with the Composition API.

[MakeAppswithDanny]

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

[ericdelacruz]

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

[yogeshv]

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

[andrewking]

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!!

[alexanderpoplawski]

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.

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.

[ga]

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.

[bryanthompson]

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

[maskman]

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

[mostafashawki]

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

[CharlieKnoll]

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

[jasonfetterly]

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

[SAIEN]

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

[danuzonez]

Very nicely explained everything about options and composition api. ❤

[mikepecha]

Great channel! Keep up the great work Danny!

[Anaxarchos]

Great tutorial, easy to understand and concise.

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

[mikemcgrumpy]

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

[flogginga_dead_horse]

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

[muhammad]

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