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
📕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. th-cam.com/video/OaUpEyz4zxs/w-d-xo.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. th-cam.com/video/W6qpsmkuJ8c/w-d-xo.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
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!👍💪
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.
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!
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!
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👍 😀🙏
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.
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.
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!
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 th-cam.com/video/gwcca_zd4IE/w-d-xo.html
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
![เปิดใจ พี่ญา คนรุม หลังทัวร์ลง หนักสุดในชีวิต!! l [Nickynachat]](http://i.ytimg.com/vi/2-OJZRtclro/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!
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! 😀
📕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. th-cam.com/video/OaUpEyz4zxs/w-d-xo.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. th-cam.com/video/W6qpsmkuJ8c/w-d-xo.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!
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!
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.
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 ❤❤❤❤
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!
Brilliant video with sophisticated production skill ! Helps me a lot in my graduation project !
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.
Best todo app project tutorial I have seen, Thank you I practice throughout the whole project
Great to hear, thank you! 😁
Good course, easy to follow and covers lots of Vue tools.
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!
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.
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!
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 TH-cam before the end of the year!
This was insane. Thanks for the course!
great course, and I appreciate your hard work. I've learned a lot from it. Thanks.
Glad to hear! 😃
Thank you for this crash course it was very helpful, and I am going to follow some of your tutorials. big up
This was a great video! Thanks for the refresher.
Will wait for that course.
Awesome course, keep up the good work!
I think I heard "to do" about 10000000 times 😅😅 great tutorial btw!
Nice crash course, with a good pace. thank you!
I appreciate the feedback! 🙌
This is Gold
Thanks a lot! 😄
Thank You. You Explained everything very well.
Look forward to react tutorial
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 👍
Thank you so much, Excellent tutorial
Very interesting method of teaching. Thank you for this!
subscribing right away.
Beautiful ♥ Thank you!
Thank you so much for this tutorial!
Thank you from Japanese programmer !
Thanks John amazing Crash Course
I’m glad it was helpful! 🙌
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??
Super nice thx! Can you show how to integrate postgresql?
Thanks for the knowledge!
Great Video! Thanks for your work!
Thank you!
Timely and Best
why does the higher load performance impact SEO negatively? Can anyone explain it?
Excelente video John!
Thanks Daniel!
Thank you for this outstanding contribution sir!!
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.
coolest crash course ever
Thanks. You are great!!
Thanks, i appreciate that! 😄
9:20
I would like Vue + TS.
One of the best vue crash courses to get one started with vue.
Very relevant tutorial. Thanks!🥰
Thanks! Glad you thought so!
excellent and super awesome ❤❤
thanks a lot great job
Great video. Thanks.
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
Thank you for tutorial 😄
useful for me, thanks
Greate video, thanks for sharing.
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!
nice job! subscribed
Awesome, thank you!
Great job John..I am waiting for your new contents on TH-cam and on Udemy..
Superb!! 🎉
🙌
Awesome!
Thanks!
Great tutorial !!
Thank you!
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!
Which plugin should I use for the result in blue text next to the console.log?
It’s called console ninja!
So Good!!
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
th-cam.com/video/gwcca_zd4IE/w-d-xo.html
@@JohnKomarnicki thanks
I am unable to find this code in your github.
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)
Thanks!
so much better than react
38:17 how to do it in setup() {....) ?
Good job
Hey yo thanks 🙏
thanks!
This tutorial could have been 1hr instead of 2 if it wasnt for all the styling 😅, its good tho
I have a Mac !
yee !
my brain is gonna blow up right now.........................................
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
❤❤❤
How can I get the discount code?
johnkomarnicki.gumroad.com/l/tqrmw
@@JohnKomarnicki thx
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!