Vue.js 3.0 Composition API Tutorial in 15 minutes

[@ProgramWithErik]

Check out my workshop! course.vuecourse.tech/workshop

[@anthonypetruzzi158]

With all due respect, I'm 7 minutes in and there is no explanation of what the composition API is, nor the benefits of using it. I don't see how this is a tutorial.

[@officialAXVin]

Same

[@Pecex]

It only makes sense when the components get really large.

[@glowiever]

this. only new syntax was shown, nothing much

[@kipruto253]

because it's like Erik doesn't know what it is he just know how its implemented and that how basically all tutorials are like ...pretty shallow

[@vaibhavksh]

Also, when returning repos data from github api, he says "gh has rate limiting" because it's returning 30 entries at a time. It will have rate limiting, but that was pagination. SMH.

[@muslim2k]

Your channel is a treasure to vuemankind!

[@ProgramWithErik]

Thanks

[@liana6054]

How did you enter a new line for in 11:58? That would help me a lot!!!

[@jaydeepsharma4942]

add before or after the {{your_data}}

[@ivindtobiasjorfald8133]

Thanks for the vid! Fun fact: Erik written your way is a hugely common name in Scandinavia, so that's probably why you can't get the username anywhere. :)

[@GrahamSutt]

How is the Composition API better than the tools we already have to achieve the same thing in Vue 2? I've been hearing and reading a lot of buzz about the Composition API, but I honestly don't see the benefit compared to using watch, data, methods, etc. Just seems like a fancy way to do the same thing. Maybe I'm missing something?

[@jeremy21212121]

My understanding is that it is meant to be beneficial when creating large applications. I don't there is a benefit for small demo apps. One cool thing about Vue 3 is the ability to make data non-reactive. Previously with Vue any data properties were reactive, which has an overhead if that data doesn't need to be.

[@contractorwolf]

hey Erik, you doing your workshop again? any way to access the recorded vesion of it?

[@ProgramWithErik]

Yes! I’m selling the recoding here! Course.vue course.vuecourse.tech/vue3

[@contractorwolf]

@@ProgramWithErik thx, you should update in the video description

[@LeoPacheco87]

Hey, Erik! Thanks for the vue3 and ts content! Quick question, why would I use this syntax over over just firing a method and populating the lis? Thanks!

[@ProgramWithErik]

I wanted to illustrate how the watch function can be triggered when any reactive variable changes. For example we could use the same watch function if the username was coming from a prop. Or maybe another function changed the user name, the watch would still be triggered.

[@miguelstevens3042]

What VSCode theme is that? Lovely

[@sadrashadmand552]

your keyboard sound is lovely sir :-D

[@ProgramWithErik]

Glad you like it!

[@sadrashadmand552]

@@ProgramWithErik, yeah and now I have to buy one in Iran with all these sanctions (from us) and hard times in economic problems! :-D jokes aside thank you for your content.

[@marekurbanowicz]

Small, but an important mistake at the very beginning: "Some backend languages like NODE". Node is not a backend language. You are sort of influencer, so please be precise, so more junior people won't get it wrong.

[@demonicious_]

Node, as in Node.js is a server-side language. Not sure where the issue lies.

[@marekurbanowicz]

@@demonicious_ this is completely wrong statement. "Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine." It's runtime for JS, not the different language.

[@julisch94]

Thanks for pointing this out. I was looking for a comment like this to upvote it. Node.js to Javascript is what Java VM is to Java.

[@andres87al2]

Thanks man ! :D

[@Kanexxable]

Vue three is out woo whooo omgomgomg

[@mrrolandlawrence]

Nice. V3 finally here. I was just learning from the beta on the assumption that it would be properly released before I got any good...

[@joshdempsey7184]

Another great video Erik :-)

[@ProgramWithErik]

Thanks for watching

[@sergiogb]

Great video!

[@danillofidelgomes6822]

nice tutorial, what difference in use this composition api or use a vue 2 structure?

[@leonardonam1]

Thanks.Precisely I'm reviewing the news about Vue 3. will it come more vidios about composition api? Thanks man!

[@phongthornkhamkankaew6226]

Thanks for the great video!! Could you please share for How to call API and allow CORS in Vuejs 3+Vite?

[@anonymousshooter3636]

Vue 3 is awesome :)

[@jenmikeandfamily8255]

could you use selectors for styling the components and elements? i suggest just because the id's and class's are distracting from the code your writing, and would likely help viewers learn from you content more efficiently

[@Kirill-nd3qv]

This might be a really silly question, but what keyboard do you use? That clicking sound is amazing. Not such amazing as your tutorials, but anyways.

[@ProgramWithErik]

Thanks it's a Corsair k70 keyboard. But half the people hate the clicking so I use my non clicky keyboard in my videos now. (Well not as clicky)

[@Kirill-nd3qv]

@@ProgramWithErik Thank you

[@shkrmkr]

Vue 3 is OUT!!!!!!

[@AcunPearce]

What is your vs code theme?

[@ProgramWithErik]

Synthwave 84

[@HostDotPromo]

Had no idea vue 3 came out. Is it easy to update and transition from vue 2?

[@ProgramWithErik]

It's still in a release candidate...

[@leskoding]

VIM inside vscode? why just dont use VIM 8 / neovim instead? :D

[@ProgramWithErik]

I really like VScode

[@AugustoTitan]

I'm glad the Composition API is optional, because I really dislike its structure. The Options API is more organized and suitable for more cases.

[@markaguilar736]

sir, how to add tailwind in vue

[@RussPainter8]

The watch function doesnt specify what property it's watching. What am I missing? Will this get called if any property changes?

[@ProgramWithErik]

Russ Painter correct

[@RussPainter8]

@@ProgramWithErik how is that a good thing? Those effects will be running any time anything changes. And that code could be making api callls!! Isn't there a way like in v2 to have watchers be for specified property?

[@SupertigerDev]

@@RussPainter8 i think variables that use ref() and reactive() will be watched only. A better solution would be to add a function to the click event to search for users.

[@steveyang4531]

Could you please share the source code on github. I'd like to learn tailwind css with Vue 3 and postcss. Thank you .

[@alisharobinson7146]

why do you have a watch function? Can you not just use the original name variable? Can't you just make a regular method that gets called on click and fetches the api? That way you don't declare another variable you just use the original since that is what you want. You just choose when to look at the variable and then after you get the data clear the original variable. Idk I'm just confused at why you declare another variable I guess to just demonstrate the watch function. Also I do not know the benefits of using reactive vs ref. Reactive just lets you declare an object and reference its' keys on assignment? Can you not do that with a ref? Idk another video elaborating the difference might be good.

[@ProgramWithErik]

Thanks for the feedback Alisha! Yes, I created the other variable so I could use the watch function. This was to illustrate that when any reactive variable inside the watch function changes the whole watch function gets triggered again. You are right I could have put the fetch in it's own regular method, but that would miss the point. Let's say for example the username came not from an input, but from a prop being passed down. In that case you'd have to have some sort of dynamic way of having the fetch re-trigger. That's the power of watch. Also ref and reactive are very similar. The way I like to think about it is, I use reactive for objects and ref for simpler items like booleans, or integers, but I need them to be reactive. You could use Reactive for everything if you wanted too...

[@K2_EastFace]

I would like to have more precision during the explanation between reactive & ref. Also I didn't understand well the use of toRefs() Thanks for the content, it's just a feedback for you, I know I can open the documentation but when watching the video it's cool to have the most importants informations

[@Maybehassanawad]

I need this keyboard

[@dovydasmiknys1419]

why would you use a watcher, when you could just fetch on click ? Dont understand the ‘newName’ logic. Its basically @click fetch with extra steps

[@copycutvideo]

Oh no what's happened to your glowy 80's theme? Joking ;-)

[@ProgramWithErik]

I still have it! I just didn't turn it on

[@adibhasib]

You are just watching your other screen when you are stuck and thus solving the problems you are fetching :/

[@BillBrutzman]

Consider GoLang

[@glowiever]

sorry but I still don't see the benefit of migrating to vue3 yet. already released two non trivial apps using vue2, works just fine. gonna dive deeper though still...

[@Yorgarazgreece]

Pretty sure this doesn't show what composition API tries to solve. Or at least not with this particular example.

[@ProgramWithErik]

It's a simple example, I think it does

[@dasten123]

This leaves so many questions open :/

[@ProgramWithErik]

Which questions?

[@dasten123]

@@ProgramWithErik Actually... just about every question one can have regarding the composition API, except maybe the syntax (partially). I was really hoping to see some explanation of _why_ this new API exists. Instead, you showed a code example that would look much better with the options API. That kind of makes the problem many people are having with this API worse.

[@adriatic123]

Vue 3 is a complete mess. Unstructured, unlogic, everything that worked better than in Angular and React they messed up. By Bye Vue

[@SigmundJaehn]

You realise it’s optional?

[@SigmundJaehn]

Also, there are use cases where it makes a lot of sense - for reuse for example.