I am a React dev preparing for a jump to Vue. I really appreciate this tutorial, as it was concise, and professional, and I feel like it equipped me with the essential tools to get started. Thanks a lot, and lots of luck to you!
Amazing course, thank you so much for this, John! The level of detail you go into is wonderful and miles above the usual "code-along" tutorials. I wanted to mention at 41:05, defineEmits() doesn't need to be imported, nor does defineProps(); that setup attribute that's included in the script tag allows for those macros to be compiled at run-time, so no imports are necessary for them
Little tip: RouterLink can be written also and you can also avoid to import that! Exactly! This is a global component in vue 3 so it will still continue to work P.s I think that there are a few of little errors in this video (just about semantic about html): - You put tag twice. In the header and inside a main. This is an error - After the tag is better to put the tag and not directly the tag Thanks for your content John, Vue is my favorite framework
This is an excellent tutorial, i had ever come across for someone who has basic knowledge in HMTL, CSS and JavaScript. Well planned and excellent detailed walk through of code.
This is the greatest Vue-crash course ever which I saw on youtube. Thanks for such simple explanation of all this stuff. You helped me to answer to a lot of questions!👍💪
What an excellent crash course this is. I did check out many, but this one is 'just right', no information overload, to the point!! I am a fan now. And will be 'Joining' (as soon as I am back in the USA, weirdly enough, I cannot pay from the Netherlands) as I think someone who takes the time and the energy to show this in such a clear understanding way, is worth every penny. And I will check out your other courses as well, as I do not think I was ever this fast learning a new language, ever!!
That is awesome to hear! Glad it's been helpful! I do have a Nuxt 3 course that i'm working on and should be partially releasing in the upcoming weeks!
📕Vue 3 Crash Course: johnkomarnicki.gumroad.com/l/tqrmw (Ad Free - Now on gumroad) 📕 Nuxt Course: www.learnnuxt.dev/ A couple updates: 37:47 - There is some more advanced differences between ref() & reactive(). The way we will be using them both within this course will not expose those advanced differences. If you want to learn more on these i created a video covering them in more depth. ruclips.net/video/OaUpEyz4zxs/видео.html 41:00 - The defineEmit is a macro within Vue. You do not need to import it like i did within this section. 55:30 When we are performing the "class binding" using the ":class", this is a shorthand for what is called the v-bind directive. Which is how you bind data to items within the template. So the full version would look like this "v-bind:class" Vue offers a shorthand, which is just ":". Throughout the remainder of this course we will use the short hand to bind data to different attributes within the template. 1:19:00 When using the v-if directive with the v-else directive, they need to be done in a sequence. Meaning that it can only be used on the next element in the template after a v-if directive 1:50:51 One thing we did not cover in regards to routes/pages is how to set the page title within the tab. I have a quick separate video you can watch on how to do this. ruclips.net/video/W6qpsmkuJ8c/видео.html Hopefully you enjoy the crash course. if you see anything else just be sure to leave a comment and i'll try my best to reply.
@1:19:00 worth mentioning v-if/else directives have to be used sequentially following the element the v-if sits on, otherwise the v-else (or else-if) will not be recognized
I love your method to teach! I come from Italy and your english is very easy to understand. I hope to see the full course with vue 3 + pinia and vite.js, maybe also with a MEVN project!
Awesome crash course! Thanks a million! There is very little available about using Vue with Composition API Some honest feedback: You are using "What we/you [wanna/gonna/going to/could] do, is..." a lot! Like within every 3 to 4 sentences, on average.
This is the best Vue tutorial for beginners, Easy explained, not several hours long, and a very good start to develop the knowledge in programming. There is much more you can do and explore. Thank you very much👍 😀🙏
Having trouble with the deploy to Netlify. I have connected my repo and Site Overview > Production deploys shows "Published". When I click the link at the top to navigate to my app the resulting page is a "Page Not Found" error. Did I miss a compile + minifiy step for production? There are no errors on my Site overview page. EDIT: fixed this by redefining root folder in my repo. Netlify was not seeing my index.html.
You're right. Theoretically you could only use one of them. But in this case it's just easier to manipulate the data with index and deleting an item with the id using the filter method.
Not with Vuex, but I do have a pinia tutorial, which is now the recommended library to use for state management within Vue 3. Introduction To Pinia | Vue 3 ruclips.net/video/gwcca_zd4IE/видео.html
This tutorial is great! But when coding it myself I stumble upon following issue: uid() function is not working properly. It prevents todos from storing in array! Anyone any suggestions?
@@JohnKomarnicki Yes, I did it. It finally worked after endless dev server restarts, vs code restarts and finally getting latest uid version, but frankly, not sure what did the magic. Cost me several hours to get it done your way,😀 but I shall not surrender. Thank you very much!
A little late in getting to this, but did you figure it out? Do you have node installed? You can check to see if it's installed by running the command: node -v in your terminal and it should produce some version number (ex. v20.11.1)
@@JohnKomarnicki The nerve of some people lol. Just got a good laugh about it though! Dude is watching your video and commenting and helping you out with the algo without even knowing, the stupidity of some people, I bet he is still stuck at hello world
![[#2024MAMA] G-DRAGON - 무제(Untitled, 2014)+POWER+HOME SWEET HOME+뱅뱅뱅+FANTASTIC BABY | Mnet 241123 방송](http://i.ytimg.com/vi/Ox29z5Nf1Uk/mqdefault.jpg)
Excellent tutorial, uses simple language, not only tells you how to do it, but also tells you why, and compares different scenarios. Thank you!
I am a React dev preparing for a jump to Vue. I really appreciate this tutorial, as it was concise, and professional, and I feel like it equipped me with the essential tools to get started. Thanks a lot, and lots of luck to you!
Amazing course, thank you so much for this, John! The level of detail you go into is wonderful and miles above the usual "code-along" tutorials. I wanted to mention at 41:05, defineEmits() doesn't need to be imported, nor does defineProps(); that setup attribute that's included in the script tag allows for those macros to be compiled at run-time, so no imports are necessary for them
Little tip: RouterLink can be written also and you can also avoid to import that! Exactly! This is a global component in vue 3 so it will still continue to work
P.s
I think that there are a few of little errors in this video (just about semantic about html):
- You put tag twice. In the header and inside a main. This is an error
- After the tag is better to put the tag and not directly the tag
Thanks for your content John, Vue is my favorite framework
Oh instresting, I wasn’t aware of that with the Router Link.
Yeah, I’m still trying to get better with semantic HTML!
I appreciate that! 😀
This is an excellent tutorial, i had ever come across for someone who has basic knowledge in HMTL, CSS and JavaScript. Well planned and excellent detailed walk through of code.
Brilliant video with sophisticated production skill ! Helps me a lot in my graduation project !
This is the greatest Vue-crash course ever which I saw on youtube. Thanks for such simple explanation of all this stuff. You helped me to answer to a lot of questions!👍💪
Really glad to hear that!
What an excellent crash course this is. I did check out many, but this one is 'just right', no information overload, to the point!! I am a fan now. And will be 'Joining' (as soon as I am back in the USA, weirdly enough, I cannot pay from the Netherlands) as I think someone who takes the time and the energy to show this in such a clear understanding way, is worth every penny. And I will check out your other courses as well, as I do not think I was ever this fast learning a new language, ever!!
That is awesome to hear! Glad it's been helpful!
I do have a Nuxt 3 course that i'm working on and should be partially releasing in the upcoming weeks!
📕Vue 3 Crash Course: johnkomarnicki.gumroad.com/l/tqrmw (Ad Free - Now on gumroad)
📕 Nuxt Course: www.learnnuxt.dev/
A couple updates:
37:47 - There is some more advanced differences between ref() & reactive(). The way we will be using them both within this course will not expose those advanced differences. If you want to learn more on these i created a video covering them in more depth. ruclips.net/video/OaUpEyz4zxs/видео.html
41:00 - The defineEmit is a macro within Vue. You do not need to import it like i did within this section.
55:30 When we are performing the "class binding" using the ":class", this is a shorthand for what is called the v-bind directive. Which is how you bind data to items within the template. So the full version would look like this "v-bind:class" Vue offers a shorthand, which is just ":". Throughout the remainder of this course we will use the short hand to bind data to different attributes within the template.
1:19:00 When using the v-if directive with the v-else directive, they need to be done in a sequence. Meaning that it can only be used on the next element in the template after a v-if directive
1:50:51 One thing we did not cover in regards to routes/pages is how to set the page title within the tab. I have a quick separate video you can watch on how to do this. ruclips.net/video/W6qpsmkuJ8c/видео.html
Hopefully you enjoy the crash course. if you see anything else just be sure to leave a comment and i'll try my best to reply.
@1:19:00 worth mentioning v-if/else directives have to be used sequentially following the element the v-if sits on, otherwise the v-else (or else-if) will not be recognized
@@draj3214 I did mention this later within the video. But yes that is a valid point! Thanks for pointing this out
@@JohnKomarnicki oh my bad. must have missed it.
No worry, definitely should have mentioned this within this section!
Best todo app project tutorial I have seen, Thank you I practice throughout the whole project
Great to hear, thank you! 😁
I love your method to teach! I come from Italy and your english is very easy to understand. I hope to see the full course with vue 3 + pinia and vite.js, maybe also with a MEVN project!
I have a full stack project using Vue, Pinia & Altogic to create a Instagram clone that should be releasing sometime in March
@@JohnKomarnickistill waiting john, that would really help a lot ❤❤❤❤
This has been a wonderful resource for my journey of learning front-end frameworks. Thanks :)
Awesome crash course! Thanks a million! There is very little available about using Vue with Composition API
Some honest feedback: You are using "What we/you [wanna/gonna/going to/could] do, is..." a lot! Like within every 3 to 4 sentences, on average.
This is the best Vue tutorial for beginners, Easy explained, not several hours long, and a very good start to develop the knowledge in programming. There is much more you can do and explore. Thank you very much👍 😀🙏
Glad this was helpful!
Lovable course! A Nuxt 3 crash course like this would be amazing
Currently working on a full course for nuxt! I’ll be releasing a crash course portion here on RUclips before the end of the year!
Thank you! This was a really great, fast and well explained course. I was able to understand everything easily. Im waiting for the nuxt course!
Super glad to hear! Working on it as we speak! 😎
Amazing tutorial, really helped me! Just signed to full stack course wait list.
Thank you for this crash course it was very helpful, and I am going to follow some of your tutorials. big up
This was insane. Thanks for the course!
love your videos John. Learned so much from you. Thanks to you I was able to start my own tech blog using Vue
Thanks, I appreciate that. Glad to hear!
Awesome course, keep up the good work!
Good course, easy to follow and covers lots of Vue tools.
Will wait for that course.
Thanks for the amazing content , Also great job explaining the Vue3 features
This was a great video! Thanks for the refresher.
great course, and I appreciate your hard work. I've learned a lot from it. Thanks.
Glad to hear! 😃
Dear John, your Vue tutorial videos help me so much, please make a video tutorial about Vuestic Admin. Thank alot.
This is Gold
Thanks a lot! 😄
Thank You. You Explained everything very well.
One of the best vue crash courses to get one started with vue.
Nice crash course, with a good pace. thank you!
I appreciate the feedback! 🙌
I just feel some of the main features such as editing, checking out items from the list are not quite explained here, got from the repo tho 👍
Very interesting method of teaching. Thank you for this!
subscribing right away.
Thank you so much, Excellent tutorial
Beautiful ♥ Thank you!
coolest crash course ever
Timely and Best
Thanks John amazing Crash Course
I’m glad it was helpful! 🙌
I think I heard "to do" about 10000000 times 😅😅 great tutorial btw!
Thank you so much for this tutorial!
Thank you from Japanese programmer !
Thanks for the knowledge!
Excelente video John!
Thanks Daniel!
Great Video! Thanks for your work!
Thank you!
Look forward to react tutorial
Thank you for this outstanding contribution sir!!
Thanks. You are great!!
Thanks, i appreciate that! 😄
excellent and super awesome ❤❤
Greate video, thanks for sharing.
So Good!!
useful for me, thanks
Great video. Thanks.
Super nice thx! Can you show how to integrate postgresql?
thanks a lot great job
Really well-organized Tutorial, thanks a lot!
But why does Stripe want my Phone number and my ID Through a Driver's License or Passport??
Superb!! 🎉
🙌
Thank you for tutorial 😄
Great job John..I am waiting for your new contents on RUclips and on Udemy..
why does the higher load performance impact SEO negatively? Can anyone explain it?
Good job
Very relevant tutorial. Thanks!🥰
Thanks! Glad you thought so!
Thanks!
nice job! subscribed
Awesome, thank you!
Great tutorial !!
Thank you!
I tried to deploy and it didn't work :( both in vercel and netlify, anyone else?
wouldnt the delete method be really shit since it has to loop through all the todos
so much better than react
thanks!
I am unable to find this code in your github.
Awesome!
Thanks!
Having trouble with the deploy to Netlify. I have connected my repo and Site Overview > Production deploys shows "Published". When I click the link at the top to navigate to my app the resulting page is a "Page Not Found" error. Did I miss a compile + minifiy step for production? There are no errors on my Site overview page. EDIT: fixed this by redefining root folder in my repo. Netlify was not seeing my index.html.
Ah! Glad to see you were able to get this fixed!
9:20
I would like Vue + TS.
Hey yo thanks 🙏
why is the delete functionality using id and the others are using index? can we use index since isn't id and index practically the same thing?
You're right. Theoretically you could only use one of them. But in this case it's just easier to manipulate the data with index and deleting an item with the id using the filter method.
Which plugin should I use for the result in blue text next to the console.log?
It’s called console ninja!
38:17 how to do it in setup() {....) ?
I have a Mac !
yee !
excellent tutorial. do you have vuex tutorial?
Not with Vuex, but I do have a pinia tutorial, which is now the recommended library to use for state management within Vue 3.
Introduction To Pinia | Vue 3
ruclips.net/video/gwcca_zd4IE/видео.html
@@JohnKomarnicki thanks
This tutorial is great! But when coding it myself I stumble upon following issue: uid() function is not working properly. It prevents todos from storing in array! Anyone any suggestions?
Did you import it into the component?
@@JohnKomarnicki Yes, I did it. It finally worked after endless dev server restarts, vs code restarts and finally getting latest uid version, but frankly, not sure what did the magic. Cost me several hours to get it done your way,😀 but I shall not surrender. Thank you very much!
my terminal isn't able to run the 'npm run dev' command from vs code smh.
Any tips for a beginner?
Did you install all the dependencies? Also, are you in the correct folder with the vue app in the vs code terminal?
@@JohnKomarnicki Yes. I can run the command in my cmd but not vscode terminal. I deleted and added the vscode path in my environment table too.
A little late in getting to this, but did you figure it out? Do you have node installed? You can check to see if it's installed by running the command:
node -v
in your terminal and it should produce some version number (ex. v20.11.1)
This tutorial could have been 1hr instead of 2 if it wasnt for all the styling 😅, its good tho
my brain is gonna blow up right now.........................................
Awesome tuttroial but my head remebers only :
TO DO TO DO TO DO TO TO TO DO TO TO DO LIST TO DO TO DO
How can I get the discount code?
johnkomarnicki.gumroad.com/l/tqrmw
@@JohnKomarnicki thx
Vue darggable not working with project 😥
I was going to do a couple of follow up videos, implementing some features with various libraries. This is one of them. So stay tuned for that video
Looking forward to the follow up vids as well.
Thanks in advance, @@JohnKomarnicki
18:37
❤❤❤
Tash. All tutorials using the ToDo example from Vue lol
*trash, but thank you for taking the time to comment :)
@@JohnKomarnicki The nerve of some people lol. Just got a good laugh about it though! Dude is watching your video and commenting and helping you out with the algo without even knowing, the stupidity of some people, I bet he is still stuck at hello world
Excellent contents
Much appreciated!