Vue 3 Crash Course | Project From Scratch
HTML-код
- Опубликовано: 19 июн 2024
- 📕 Vue 3 Crash Course: johnkomarnicki.gumroad.com/l/...
🤖 SaaS I'm Building (WebDevDaily): www.webdevdaily.io/
📹 Writeable computed properties: • Writeable computed pro...
📹 defineModel: • This New Vue 3.3 defin...
🚀 Join the channel : / @johnkomarnicki
🤖 Website: johnkomarnicki.com/
🐦 Twitter: / john_komarnicki
Repository : github.com/johnkomarnicki/vue...
Demo: sparkling-platypus-7955f2.net...
Timestamps:
0:00 Introduction
1:30 Prerequisites
2:23 What is Vue?
4:58 Why use Vue?
5:52 Why Vue over React/Angular?
7:07 Vue SFC's
8:02 Github Repository
8:25 Section-1: Create Vue Project
10:12 How Does Vue Work
15:18 Overview of Vue Project
19:21 Section-2: Project Cleanup
20:48 Section-3: Install Project Dependencies
21:52 Section-4: Simple Global Styles
23:29 Section-5: Navigation Component
29:11 Section-6: Todo Creator Component
38:17 Section-6: Emit Custom Events
46:27 Section-7 Todo Validation
57:20 Section-8 Slots
1:01:10 Section-9 Todo Item Component
1:20:58 Section-10 Toggle Complete Todo
1:27:38 Section-11 Edit Todo
1:33:47 Section-12 Delete Todo
1:36:26 Section-13 Save Todo's To LocalStorage
1:41:40 Section-13 watch()
1:46:00 Section-14 Completed Todos State computed()
1:50:40 Creating Additional Routes/Pages
1:53:56 Deploying To Netlify
1:57:35 What's Next?
#vue #vue3 
Наука
Amazing tutorial, really helped me! Just signed to full stack course wait list.
Excellent tutorial, uses simple language, not only tells you how to do it, but also tells you why, and compares different scenarios. Thank you!
Brilliant video with sophisticated production skill ! Helps me a lot in my graduation project !
This was insane. Thanks for the course!
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 was a great video! Thanks for the refresher.
Awesome course, keep up the good work!
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
Thank you for this crash course it was very helpful, and I am going to follow some of your tutorials. big up
Beautiful ♥ Thank you!
Will wait for that course.
Very interesting method of teaching. Thank you for this!
subscribing right away.
Thank You. You Explained everything very well.
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!
Thank you so much for this tutorial!
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!
Best todo app project tutorial I have seen, Thank you I practice throughout the whole project
Great to hear, thank you! 😁
Thank you so much, Excellent tutorial
Thank you for this outstanding contribution sir!!
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.
Thanks for the knowledge!
great course, and I appreciate your hard work. I've learned a lot from it. Thanks.
Glad to hear! 😃
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! 😎
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 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!
Nice crash course, with a good pace. thank you!
I appreciate the feedback! 🙌
Great video. Thanks.
So Good!!
Great Video! Thanks for your work!
Thank you!
Thank you for tutorial 😄
Excelente video John!
Thanks Daniel!
thanks a lot great job
This is Gold
Thanks a lot! 😄
excellent and super awesome ❤❤
Timely and Best
Very relevant tutorial. Thanks!🥰
Thanks! Glad you thought so!
useful for me, thanks
Greate video, thanks for sharing.
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! 😀
Thanks John amazing Crash Course
I’m glad it was helpful! 🙌
Thanks!
Super nice thx! Can you show how to integrate postgresql?
Thanks. You are great!!
Thanks, i appreciate that! 😄
nice job! subscribed
Awesome, thank you!
Great tutorial !!
Thank you!
thanks!
Superb!! 🎉
🙌
Great job John..I am waiting for your new contents on RUclips and on Udemy..
coolest crash course ever
Awesome!
Thanks!
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 👍
Good job
Hey yo thanks 🙏
Look forward to react tutorial
why does the higher load performance impact SEO negatively? Can anyone explain it?
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??
Which plugin should I use for the result in blue text next to the console.log?
It’s called console ninja!
wouldnt the delete method be really shit since it has to loop through all the todos
I tried to deploy and it didn't work :( both in vercel and netlify, anyone else?
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.
38:17 how to do it in setup() {....) ?
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!
❤❤❤
so much better than react
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)
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!
How can I get the discount code?
johnkomarnicki.gumroad.com/l/tqrmw
@@JohnKomarnicki thx
my brain is gonna blow up right now.........................................
I have a Mac !
yee !
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
This tutorial could have been 1hr instead of 2 if it wasnt for all the styling 😅, its good tho
📕Vue 3 Crash Course: johnkomarnicki.gumroad.com/l/tqrmw (Ad Free - Now on gumroad)
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!
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
I think I heard "to do" about 10000000 times 😅😅 great tutorial btw!
Excellent contents
Much appreciated!
One of the best vue crash courses to get one started with vue.