Vue JS 3 Tutorial for Beginners #10 - The Composition API (part 1)

[@pewolo]

You know what Shaun, you are the best web development teacher ever, all your words sink in like magic and you took me from zero to hero in Vue JS. There is no word that better describes how amazing you are. May God returns this kindness to you in thousand folds!

[@NetNinja]

Thank you so much for the kind words 🙏

[@avidonovan3222]

I guess Im kinda off topic but does anyone know of a good place to stream new series online ?

[@jakubschulz4353]

This music when creating a project is the best

[@spicemasterii6775]

Yep. I hope Vue includes it and plays it when creating a project.

[@dopamine_Seeker]

😂😂😂

[@speckyferns6780]

yes, my favorite too. Kind of miss it when my @vue/cli does nothing :)

[@FADHsquared]

38:25 - FYI people, the syntax is now stable, basically anything you write in is equivalent to writing anything in the setup() hook. And any top-level bindings (imports, variables, function declarations) are "automatically returned" so you don't have to worry about returning yourself anymore!

[@oxk4r01]

But has errors :( I got one saying there is no export default method...

[@iUmerFarooq]

Hmm... Thank you for this amzing tip ;)

[@sophiaonyoutube]

thanks!

[@pangogeeks]

This is such a CRUCIAL video to watch which will remove doubts about the concept of reactivity in Vue. Before watching it I couldn't get my head around why we use ref for something not related with DOM refs, why not reactive, why computed, etc. You answered all my doubts in one shot! Attashaun and thank you so much!!!

[@amckee250]

Not sure what I love most about these tutorial videos, the concise, in depth explanations or the old timey song played when creating a Vue project :)

[@batra.vivek80]

Dear Shaun, In my carrer of 18 years I have never came accross a YT tutorial as good as yours. You have made learing Vue a cake walk. You are so much clear on what to demo and how to demo. Your contents are very very much structured and totally inline with what a begginer would like to know. I am going to watch all of your tutorials now. Kudos

[@NetNinja]

Glad it helped! :) thanks for watching and for your kind words!

[@batra.vivek80]

@@NetNinja lot of respect and love 😊. You are the best teacher

[@jackiechan5798]

Great tutorials, i finished watching all your ads as a thank you

[@maulik1644]

The way you explain composition API is amazing 🔥🔥

[@NetNinja]

Thanks a lot 😊

[@94sl]

This is by far the best video and the most accessible way for me so far to move over from the options API to the new composition API. Thank you a million!

[@NetNinja]

Thank you :). Glad you liked it!

[@Acuce7ibd468j]

I watch the Ads till the end cuz ur content deserves to be supported ❤👍. I really appreciate doing more projects in SSR with vue

[@NetNinja]

Awesome, thank you for your support Mahmoud! :)

[@pyplacca]

React devs learning/transitioning to Vue would really appreciate the Composition API over the Options API

[@Fryknowledge]

your explainations are very understandable shaun. It helped me in cracking my first vue interview. Thanks shawn.

[@NetNinja]

That's awesome to hear :)

[@LKBean]

Thank you soo much for these tutorials! They're clear, concise, easy to follow, and very informative. You, sir, are a wonderful person for making this

[@thelolladorfking2416]

Once I get my job, I'm sure I'll donate you. Thank you so much sir.

[@MdKamrulIslam-b4c]

Best Vuejs course ever. Thank you so much Shaun.

[@NetNinja]

Thanks! that means a lot :)

[@shaikadnan2186]

Your videos are great sir!! Quality learning stuff for free!! If I become a web developer in future, it would be totally because of you sir that too for free. Proud to be a NET NINJA

[@defidelity]

You're really amazing, I recommend your channel to all newbies that I know. I've so far learnt Tailwind, CSS Grid and Vue JS from you. I'll just say you carried my whole frontend experience.

[@흐음-u2n]

The best lecture i've ever seen. thank you

[@hipstersavage]

One of the best teachers on the youtube

[@SohoCode]

5:11 favorite part 😁

[@Coronerlex]

I am struggling to understand the section from 16:09 to 18:18. We can't access p.value because it hasn't yet been returned? Why wasn't p returned? The setup() returns name, age, handleClick, and p. It must have returned name, age, and handleClick on page load otherwise the element wouldn't have the values for name and age initially...So then why hasn't "p" been returned at that point? Why is it not returned until handleClick is clicked?

[@lucapassani1129]

Very nice. Thank you. I was not aware of the composition API and was stuck trying to make sense of a code example that used it. Now everything is clear.

[@owadefelix6476]

You have a nice and easy way of explaining things , kudos

[@chorinaelapin]

謝謝！

[@NetNinja]

Thanks for your support :) it means a lot!!

[@tompearson6540]

Thanks for such a clear and detailed video Shaun, great help! Is there a VSCode extension you use to do the auto-import of 'ref' at around 13:30?

[@sakalbhile]

Very detailed explanation 👍

[@Rivederchee]

BOOOT - I love your tutorials

[@alielzahaby3315]

thanks man you're the one helped me after Allah preparing for my new project that I need to make in work 🙂❤

[@NetNinja]

Glad I could help :)

[@BullWinkleBull]

Best tutorial!!! Thank you!

[@RyazantsevNikolay]

Wonderful tutorial. Very clear and concise, way better then original Vue ones. Thanks!!!

[@69leostereo]

awesme material ... please keepme in the loop.

[@kennethcruz1234]

I love you so much, sir the net ninja ♥

[@dil-jay]

Thanks for this great tutorial

[@turalrzaxanov4373]

Thanks a lot of such awesome tutorials. God bless you!

[@NetNinja]

You're very welcome Tural!

[@izzatullokanoatov370]

Awesome explanation. Thank you, brother. Love the way you explain things.

[@hadisergan1]

Muslim student of you, from Bangladesh sir [Thank you for your lessons].

[@ricklove8358]

u just made composition api sound like a sweet thing to me. 😊

[@martinfinch5011]

Great video as always

[@NetNinja]

Thanks Martin!

[@ugurtigu]

Hey I've a question: can't you use the index of an element in an array as the key when iterating over them instead of the elements value itself? Because normally an array has not always unique values but the index should be unique?

[@junchengdong]

Then how can you get the index of an element in a for-each loop? Unless you specify it in the data. For example, the "id" of the job does a similar thing since id = index + 1.

[@ugurtigu]

@@junchengdong you can get the index from for-each arr.forEach(function callback(currentValue [, index [, array]]) { // Iterator }[, thisArg]);

[@junchengdong]

@@ugurtigu I guess you cannot do such a thing in v-for, right? Because you are not really passing in an array to the tag every time.

[@ugurtigu]

@@junchengdong technically you can do {{ parentMessage }} - {{ index }} - {{ item.message }} but in this example it's a ref dunnow how you can do it then. M question though was general because I saw that often in the series that the person who made the video used not an index but the element

[@junchengdong]

@@ugurtigu okay, I see. Maybe for simplicity cuz it's just a tutorial video?

[@runehansen3105]

What number branch does the dojo-blog project start in the github repository? I can't find it? What Lesson number is it?

[@ME-dg5np]

Super lessons !! 👍☀️🌲 The best ! 👍☀️

[@finishitoff]

You got a new subscriber❤

[@frizzipazzi3600]

44:30 can't i just update the reactive() nameTwo using "this.nameTwo = "Luigi" ?

[@frizzipazzi3600]

because it seems to work to me but im not sure if there are negative sides i can't see

[@okpain8324]

You are such a Goood Teacher Thanks words its not enought for thanking u . much love

[@itsn72]

amazing one Shaun ;)

[@kbaker04]

I don't get why in the template we can access and render the search value as just {{ search }} but in the computed filter we specifically have to access as search.value?

[@colinm3130]

I am still having a hard time understanding what the advantage of using the setup() is over the older way with everything in its own function (computed(), methods(), etc. So far they seem like two different ways to handle things, but I have missed what the reason is to use one over the other. Could someone catch me up?

[@esutana]

1. the new way can make the coding more organized (similar features groupped together) 2. low-level apis like watch, watchEffect can be used to make more advanced features

[@yoduh99]

"the older way with everything in its own function". except "everything" is usually split between those functions, e.g. created() hook initializes a data() object which is referenced by a computed() property which calls a function in methods()... meaning when you try to follow the logic of something you're constantly jumping around. compare to the composition API where all the logic for accomplishing something is all within the setup() method

[@harryscarheadsam]

@@esutana ​The setup way is confusing for me. Besides, now there are two ways to use it! Also, watch can be used in options api as well!

[@kushranadaioi685]

nobody: net ninja: create couple of variables, let name = 'Mario' Gets me every time lol

[@lukasluftlaufer1093]

mind = blown!

[@jithind-feverx2818]

Ur awesome ❤️❤️🔥🔥

[@raziyehjed362]

hi, I have a question, about whatEffect function when we create a function to stop the watchEfect actually it does not work because watchEffect runs when the component loads and when we push the button in order to stop it, after refreshing the page watchEfect still works, so we can not stop that unless saving in localhost, am I wrong?

[@jeffgoes4116]

Shaun, thank you for the video and as usual, great content quality! I was wondering what would happen under the hood if we used names.value.filter() directly instead of calling it as a callback of computed()

[@hadisergan1]

thank you sir

[@Defense89]

wow nice course was pretty clear liked it... only one thing id like to ask i did'nt understand how come calling the function stop watching does stop watching since in the function it is watching?

[@pangogeeks]

I just wanna add that WHY we use computed is to strip out from templates of some logic which could encumber them. It's better, in fact, to keep the logic and the modifications of our refs in the script rather than in the template

[@fredpourlesintimes]

A lot of new features... Pfew! I'm questionning myself about using or not using the Composition API ; even if it seems interesting to use.

[@markusboden6127]

Me when the download music kicks in at 3 a.m 👯 - Thanks for these tutorials!!!

[@NetNinja]

Aha, You're very welcome! :)

[@almostrandomnickname]

great explanation.

[@NetNinja]

Thanks Agustin!

[@akaandre3562]

Does anyone else find the loading music when he creates a vue app satisfying? hehe

[@sayemarg]

With watch(variable, (newValue, oldValue) => { }) We Can Use Variables Old And New Value On Changing In watch Function And I Think It Is More Useful Than watchEffect In Some Uses 🤔

[@regolyth]

Thank you, very useful

[@afrazahmadkhokhar]

Million likes 👍

[@svilen001]

too bad its not possible to find the code for exactly this lesson but the content is amazing and probably worth buying the full course on udemy

[@usmanmughal5916]

Waiting for next video

[@aristideirie9574]

You are amazing, thank you so much

[@NetNinja]

Thanks Aristide!

[@raj.blazers]

Hey Shaun, Is Vue class component with Vue property decorator is different from composition api? Which approach is best?

[@derekbressler9154]

vue is the best!

[@hassaniqbal6199]

agree

[@derekbressler9154]

agree

[@TigranKuchatyan]

Great tutorial. I just wonder why initial matchingNames array should include any name, when search is empty. Anybody can help me with that? Thanks!

[@Dipenparmar12]

Great tutorial as always. ( FYI: I couldn't find correct source code in mentioned github repo)

[@marcscherzer]

37:19 If you have a mix of capital letters and small letters in names, you can convert names and search keyword to lowercase, like : const names = ref(['Mario', 'Yoshi', 'Luigi', 'Toad', 'Bowser', 'Koopa', 'Peach']); const matchingNames = computed(() => { return names.value.filter(name => name.toLowerCase().includes(search.value.toLowerCase())); }); I believe there are more effective ways to do this, but this is one of the simplest way to accomplish it imo. Feel free to share yours :)

[@ridl27]

ty.

[@mod7ex_fx]

thank you so much i loved your explaination , the best course out there

[@NetNinja]

Thanks so much :)

[@handsomeman5098]

I like your style. how you teach.

[@tomu_sange]

Why is the course price keep going high. Yesterday it was 13 but today it is 16 what is happening

[@noushedakib1658]

just awesome

[@shubhang2877]

Can you make an updated Redux tutorial? Or do you think its dead and no-one is gonna use it?

[@NetNinja]

I don't think it's dead, but I don't think it's crying out for another tutorial. I will be doing an up-to-date React series very soon though. And will probably cover alternatives soon too.

[@shubhang2877]

Omg yessss. I watched both your react serieses(is that a word) and I cant wait for more :D

[@ibrahimhalilozhun3306]

Hey Shaun, İ think you should have a MERN Stack course

[@derekbressler9154]

vue is the best

[@davidadewumi8116]

Thanks for this wonderful tutorial.. you're a lifesaver.. Quick question: Instead of writing: Const foo = ref('mario') And then updating the value with "foo.value" Why not just declare it as: Const foo = ref('mario').value And then you can just update it like you would a normal dynamic value

[@WorldRankMoba]

Thanks

[@adante407]

I'm still a little undecided about Vue. Obviously there are less opportunities employment wise which is a determining factor in choosing between React, and Vue. But it also seems learning Vue makes you good at Vue. Whereas learning React makes you good at JavaScript?

[@eyriusbacterius]

Yes i m undecided as well right now :D What did you choose?

[@adjiKurniaPutra]

thankssss

[@bunyaminmercan5077]

Can you teach us how to make videos, your desktop setup etc.

[@SkipThorp]

when I was 16 back in 1985, I had a car that had license plates with NINJA-1 on them.

[@Youssefchibi]

I don't understand why we use Computed , why not just function .

[@lalaland1234-s5i]

I think because normal functions are not reactive. You can think "computed" as "ref" function.

[@beaugareldimi8150]

Can you do a formation vuejs but with Graphql API ? Please 🥺🥺🥺

[@ridl27]

w/ knowledge of React - vue is EZ :D

[@bekchanovbotir2474]

subtitles?

[@anandathawale609]

Hey net ninga can I buy your merchandise form india

[@maskman4821]

This video is extracted from Shaun's Udemy course ~ www.udemy.com/course/build-web-apps-with-vuejs-firebase/ whick currently I am taking, it is a fabulous course, I have learned a lot, Master Ninja rocks !!!

[@runehansen3105]

What number branch does the dojo-blog project start in the github repository? I can't find it? What Lesson number is it?

[@_isaac_muniz_]

Wtf we can't use primitive values with reactive... what a flaw in the framework :(

[@user-kk4es3li1p]

That's why we use ref 🤷

[@paalaleksander]

There's no nonsense with you.. There is a few web dev teachers on youtube that knows what they talk about, but I get soooo distracted by the jokes, haircuts and stuff they come up with.

[@thecscontent5110]

I also do videos about programming!😁

[@DanielKaye0]

For future reference, I believe Mario is older than Luigi 🍄😁

[@NetNinja]

I’ll take your word for it 😁

[@heshanwijerathna]

First commet

[@AlexTheGreatish]

I only watch these videos for the classical music 🎵

[@reinoutko]

I dont really see the advantages this has over options, it seems to me its innovating for the sake of innovating

[@parazol123]

I am using Vue for about 3 years but the Composition API is a joke. Good old Options API.

[@nguyenhuunguyeny6115]

learn any framework that you don't teach, I won't 👍👍👍

[@jsnmad]

After this video, I still don't understand the case for the Composition API. I rather stick with Options API. Sometimes, we are learning new things to make no progress. So, the learning gives a net value of zero.

[@reinoutko]

I agree