How to use the Vue 3 Composition API - Beginner VueJS 3 Tutorial

[@tanzimibthesam5861]

React Js without jsx . Interesting. Your explanation is awesome.

[@grgurgrisogono656]

Thank you very much, sir. I appreciate your support 🙌

[@tanzimibthesam5861]

@@grgurgrisogono656 So kind keep the tutorials coming

[@aram5642]

I would be curious to see a bigger application (esp. the file structure), and how you deal with modals (do you emit results as events w/data, or relay them in store? do you open/close a modal throu actions or imperatively via some .open method?) and forms - all in the most effective way.

[@munapadhi8723]

wow Clean understanding composition api and reactive api, and fun video

[@grgurgrisogono656]

Thank you so much, that means a lot to me 😀

[@presida3927]

Great teacher out there. Thanks

[@grgurgrisogono656]

You're very kind, thank you for supporting our channel 🙌

[@ecoseodeutschland9864]

Very good video, you instantly motivated me to learn v3 today! thx

[@4BeerLife]

Thx, you help me a lot !

[@Moduscreate]

Thanks for watching!

[@santiagoaguilar3706]

You’re really funny and a good explainer. Thanks for the video.

[@grgurgrisogono656]

That means a lot to me, thank you so much!

[@adrihm8165]

Yeah very good explainer I agree

[@aitcomputer8397]

Really Good. Amazing Explanation

[@saurabhjha575]

Great video!!

[@grgurgrisogono656]

Many thanks!

[@saurabhjha575]

@@grgurgrisogono656 please make more videos on Vue3. You explained really well. It helped in understanding. Thankyou!

[@yves2522]

Thank you so much. Clear and...funny, you saved me so much time !

[@Moduscreate]

Thanks for watching!

[@grgurgrisogono656]

Then my goal is achieved! Thank you for your support, Yves 🙌

[@aykxt]

Great Video! PS: Which font you are using in VSCode?

[@grgurgrisogono656]

Hi Aykut, thank you very much :) I use Operator Mono Book with ligatures. I hope that helps ;)

[@aykxt]

@@grgurgrisogono656 Thanks 👍

[@aleksandrippatev1268]

Wow, so amazing! LIKE👍

[@Moduscreate]

Thank you for your support!

[@grgurgrisogono656]

Thank you so much, Aleksandr!

[@shortsoflifeofficial]

Hi, Can you please also provide an example of how to manage state while user authentication in Vue 3 ?

[@rchin75]

Thanks! This is super cool!

[@grgurgrisogono656]

Much appreciated, Roy!

[@maskman4821]

awesome !!!

[@grgurgrisogono656]

❤️

[@code4func-kythuatlaptrinh859]

Zep, i like your style 👍

[@Moduscreate]

Thanks @Code4Func! =)

[@adrihm8165]

Thank you , very interesting

[@grgurgrisogono656]

I appreciate it, Adri

[@ben790924]

I subbed for more vue 3 things :D

[@grgurgrisogono656]

Thanks! More stuff coming up for you!

[@saikun0293]

Loved it!

[@sathyanirmanifernando]

Thanks a lot .........

[@shutterradio]

Cool! Thank you! Little note: I feel like it could be speed up a little bit. I usually watch youtube on normal speed, but this time switched to 1.25 (but maybe that's too much)

[@grgurgrisogono656]

I appreciate that feedback! Thank you for helping us get better at this 😉

[@fszhao8064]

讲的很生动，通俗易懂

[@rangabharath4253]

awesome

[@wernerlaude3514]

Nice to watch.. Would be great to have the code too, as in part 3 I have an error..computed () => ...may be something changed in between.

[@atomicnoexcept]

Hi Werner, Thank you for the feedback dude! Do you have a GitHub repo link we could review? :)

[@agriboz]

Adim adim guzel bir ornek olmus.

[@aitohideki1947]

Hi Grgur. It's announced that Vue.js itself supports SSR. How can I set compiler settings for server side rendering?

[@grgurgrisogono656]

Great question! I'll create a sample app and a video on Vue 3 SSR so make sure you're subscribed. Meanwhile, the compiler settings are all worked out through @vue/server-renderer, which makes it a nice and easy interface for SSR in Vue 3. More on that soon!

[@aitohideki1947]

@@grgurgrisogono656 Thank you so much Grgur. I subscribed your channel, so that I can get notified about your new posts. Can't wait for the Vue3 SSR tutorial. 🤭

[@grgurgrisogono656]

@@aitohideki1947 Hideki san, is this on track of what you wanted to see? twitter.com/ggrgur/status/1291025504171102208?s=20

[@gpalmadev]

amazing video tutorials and a fanny guy :)

[@Denisamoldrio]

Hi, I'm pretty newbie in vue. Does it works as a replacement for vuex at some point?

[@grgurgrisogono656]

Great question. This depends on how you want to manage state. Composition API is only going to mature with time and we'll see where it takes us, but for now it's great for light state management. This will work even better with Providers. Don't worry, a video on that is coming up. Vuex is more robust. Vuex and composition don't have to cancel each other out. Try composition-only with a small sample project and see how it feels for you.

[@grgurgrisogono656]

@Rose Drone Solutions That's great feedback, thank you! I'll work on a Vuex-related content for you!

[@grgurgrisogono656]

@Rose Drone Solutions, In that case, you'll have to import it on a parent component and use provide and inject to reuse the same reference in a child component. Would you like to learn more about that approach?

[@MattDuarte11]

Would this replace data?

[@grgurgrisogono656]

This simplifies the class-like syntax and focused more functional-like programming style in a single place, which is the setup function. You can still use data if you'd like, but I find it more appealing to keep things in one place with solid type safety via Typescript

[@baseerx]

Sir,can i get the whole vue3 code on github?

[@RJCommunityDev]

gives below error error The `$listeners` is deprecated vue/no-deprecated-dollar-listeners-api help me in resolving

[@grgurgrisogono656]

Automatic inheritance of attributes is no longer happening in Vue 3. $attrs will now contain all non-prop attributes and non-emitted events without any extra work. What you really need is just v-bind="$attrs" and use $attrs to identify listeners. I hope that helps

[@rickyj1]

Dark day for Vue with this lack of direction. Great tutorial though haha

[@brambekkers]

Use .number on the v-model

[@grgurgrisogono656]

You're right, that's a more appropriate way to bind numbers

[@akauppi2]

It's kind of sad that there's so much joy in getting basic reactivity working. ... :) That's a natural programming paradigm. Spreadsheets had it from the start. Somehow, us humans enjoy dealing with computers using an "assembly language" paradigm (do this - move that). Maybe it makes us feel superior, or it has to do with our tendency to micro manage, don't know. Reactivity at organisations could be the next frontier. Make it so!

[@jctapuk]

let result = computed(() => num1 + num2)

[@guillercelestino801]

It feels like React.

[@CristoferSousa]

i have the same impression

[@fszhao8064]

个人还是很喜欢Class风格，但是this不能很好的推导类型，总是找不到一个完美的方案

[@silvesterwali6565]

this guy is too fanny .keep going bro

[@zerefdev]

apparently, vuex is gonna die with these new awesome features

[@im.empimp]

no *CLOSED CAPTIONS* 😞👎

[@grgurgrisogono656]

I recognize how that can be an issue, so thank you for reporting. We are working on adding human-edited subtitles. Automated CCs are never good enough, and we can't settle with mediocrity. I appreciate your patience until we start rolling out a better CC support

[@centuxdevelopment5419]

I'm a bit disappointed and excited. Hopefully, readability isnt an issue in Vue 3.

[@grgurgrisogono656]

I strongly believe Vue 3 improves readability by introducing simplicity. It may take a little bit to get used to the new patterns, but when you look back to how you used to do things, I think you'll see how life got better