Vue 3 Tutorial for Beginners - Learn Vue in 3 Hours (FULL COURSE)
HTML-код
- Опубликовано: 13 июн 2024
- Welcome to our Learn Vue 3 Tutorial Course for Beginners! Vue is a progressive framework for building user interfaces. Ready to start your path to becoming a front end Vue developer? Let's get started!
TWOTTER GITHUB REPOSITORY → github.com/MitchellRomney/TEI...
VUE.JS 3.0 DOCUMENTATION → v3.vuejs.org/guide/introducti...
NODE.JS → nodejs.org
GITHUB → github.com/join
VUE DEVTOOLS → github.com/vuejs/vue-devtools...
WEBSTORM → www.jetbrains.com/webstorm/
───────────────────────
⏰ TIMESTAMPS
⭐️ SETTING UP
0:00 - Chapter 1: Course Introduction
1:52 - Chapter 2: Project Setup
⭐️ THE BASICS
12:32 - Chapter 3: Building Single File Components
35:20 - Chapter 4: Template Conditionals, Loops & Events
54:51 - Chapter 5: Forms & Handling User Input
1:11:36 - Chapter 6: Dynamic Styling, SCSS, & Global Styles
⭐️ LET'S GET ADVANCED
1:35:22 - Chapter 7: The Vue 3 Composition API
1:46:54 - Chapter 8: Routing With Vue Router 4.
2:18:14 - Chapter 9: Global State Management With Vuex 4.
2:35:21 - Chapter 10: Deploying To Heroku
───────────────────────
DISCORD → / discord
TWITTER → / _earthissquare
INSTAGRAM → / _earthissquare
WEBSITE → www.theearthissquare.com/
───────────────────────
PERSONAL LINKS
RUclips → / mitchellromney
TWITTER → / _mitchellromney
INSTAGRAM → / _mitchellromney
TWITCH → / itsmitchellromney
GITHUB → github.com/mitchellromney/
───────────────────────
MY CONTENT KIT → kit.co/MitchellRomney/the-mit...
MY PC SETUP → kit.co/MitchellRomney/the-mit...
───────────────────────
BUSINESS INQUIRES → mitchell@theearthissquare.com
#vue #learntocode #webdevelopment #tutorial 
Наука
![Docker Crash Course for Absolute Beginners [NEW]](http://i.ytimg.com/vi/pg19Z8LL06w/mqdefault.jpg)
I normally don't leave likes or comments on videos but this one is well deserved. Great work, truly appreciated.
Thanks Tony, that means a lot! Welcome to the community earthling 👽
If you want to learn how to build web applications inna short time, then i Highly recommend this course on Udemy, it really takes you from a beginner to a decent developer: "learn laravel vuejs, build a tesla app"
👽 Become an official Earthling! - Join the Discord: discord.gg/X23epKN
Nicely polished for a new channel. Hang in there on the views and subscribers. They will come in time, especially when you have very good content. If I were you, I would work on a couple of new videos, then reach out to Brad Traversy to see if you can do something on his channel, since he now mostly uses guest presenters. That would give an instant boost to your channel.
Good job.
This is the best Vue3 tutorial I came across on RUclips. I gone through a bunch and none of them was directed towards the beginners. Man, you teach really well, why did you stop making tutorials?
This is by far the best, well covered, simplest tutorial I've ever watched about Vue. Thank you
Hey hey, just a little feedback: the tutorial is nice, really nice! Thank you so much for your work. However, I'd like to point out that doing "off-screen modifications" is slightly annoying since the user will have to then check your code line by line to make sure having carefully implemented your modifications, and eventually he will replicate it but most likely it will be with some conceptual errors, with me, it was mostly with the UI - leading to some graphical e̶r̶r̶o̶r̶s̶ horrors :)
This kinda disrupts the whole learning experience. So for next time, may you explain more thoroughly what you've changed from time to time? That'd be great!
amen
I agree 100%. I hated it at first but it did forced me to troubleshoot and find solutions. I got a better undemanding of vue3 because of it.
I share the same feedback, I stopped following the moment he has done the off screen modification because it is just selfish when you're doing a video for others and eventually the whole concept of a tutorial becomes useless.
Saving off screen mods as stand alone files in git would help a lot
@@problemchild959 in this case, make branches on github for each chapter... Its 0 overhead work for him, and if something doesn't work there is some base to continue the tutorial on.
tbh, most of the things done off video are easy, but it's just annoying to update the project before being able to continue the tutorial
This is one of the best coding tutorials i've ever watched! Thank you!
The most magnificent tutorial I've ever seen in my life!!! Keep it up!
Excellent Tutorial with a Streamlined approach from Starting to Hosting.
Thanks Nirmal! Welcome to the community earthling 👽
Wow, your tutorial is so well structured that I can follow the content smoothly. Thanks so much for making this video!
Glad I could help Howard! Welcome to the community :)
Dude, your transitions in this video are something else. And yeah, great tutorial, been searching for something that is up-to-date and found yours luckily
Welcome to the wonderful land of Vue! Glad I could help, thanks for the compliments!
I don't understand how someone can make videos for hours and use small fonts.
THIS IS MADNESS.
try changing the resolution of the video,
When I first started watching it had the same issue then I put it on HD, and also put it on full screen mode on second monitor.
@@denoldtimer1024 Fonts still too small. Thanks for the help.
People making videos should think about things like this. This is madness.
Spent new year's eve watching this video as we transitioned into 2021. Great stuff Mitchell. Thanks a ton. Cheers.
Great tutorial i like the quality you bringing to this channel! You got so much potential with this channel! Wish nothing but the best in your RUclips career!
Thanks so much! Welcome to the community :)
Amazing tutorial man. I loved the way you explained things and providing details. Looking forward for your React tutorials as well.
This tutorial started out great. There was good explanation, time to look and review what was done, and it was easy to follow.
However...
Off screen modifications will cause confusion, frustration, and will stop people from watching.
If you asked your watchers to do the suggested changes, and then expain how you did it, that would be different. But needing to write out your code from a paused screen was an unproductive way to do this.
Really a great course. Well structured and paced. This has been very helpful for my first Vue project. Thank you and looking forward for more !!
Thank you so much for your greatest gift, mate! Just learned Vue 3 in a chilling Christmas night.
This was awesome! Great tutorial, looking forward to more.
Thanks Wayne, welcome to the community!
This is so lovely and easy on for beginners. Starting from basic to production. And nice graphics too
I am 31 minutes into this tutorial and I'm really enjoying it. I am a total newbie when it comes to Vue 3 and I appreciate such kind of content because it's free and there was a lot of effort that went into it's making.
Having said that, I would kindly suggest to put up more Vue 3 projects/tutorial because I am currently enjoying your teaching.
I have come to realise that there are less Vue tutorials that cover the MEVN stack so I would greatly appreciate if you did one.
Thanks Mitchell for your dedication.
This is what exactly I looked for. Thank you so much!
I've gone through the first 40 minutes of your video... Sir, this is priceless. Great tutorial, great dinamic and also I fell in love with the transitions on your video :) Keep it up
Hey Hernan! Thankyou so much! Welcome to the community earthling 👽
subscribed at "welcome to twotter!" moment :D
A great tutorial every second of the tutorial is priceless. Really appreciate the efforts.
Thanks a ton! Welcome to the community :)
Really digged this tutorial, thank you very much! Subscribed!
At the outset I liked your friendly conversational tone. The tut is also great. Thanks.
Thank you so much for the tutorial. It really helped me. I just started learning vue and I must say that your video is perfect for me compared to other vue tutorial videos I ve watched.
awesome tutorial, upto the point on whats required to learn vue3 and vuex 4 along with composition api. Thanks Mitchell for this!
Excellent work! I did know nothing about Vue and now I feel more comfortable to start coding with Vue.
Thanks a lot!
Thanks you so much, this is a FANTASTIC guide. I love the chapter format too!! My feedback: Make new branches on your git repo for each chapter, so people can check their code against yours at the end of each chapter :)
I watched a lot of Videos about VUE. But yours was really the best and made it possible to set up my app
great work, nice to see such a great course on vue to start with, appreciate your work and effort
i've done this course, cant wait to see the fullstack version
This video is f*********cking dope! I instantly understood vue. Flow was perfect! Keep it up!
Wow, thank you...
I started learn vue js a week ago and your video help me a lot to understand this framework....
Very high quality tutorial, I just wish you'd have a commit for each chapter on the github repo
Really loving it. the way you explain.
wow what a great tutorial. so glad I found this channel. thank you!
VUE 3 IS OUT🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
Released a day after this tutorial was uploaded, what a happy coincidence!
Welcome to the community earthling 👽
Amazing content, Thanks looing forward to next series on vue
This is an amazing tutorial, I have been looking for review materials for Vue, which are very helpful!
Glad it was helpful! ❤️
great tutorial. I learned a lot from your course especially Vuex and Routing.
Great tutorial! I need to learn VueJS for my job and I think that I'm getting a better grasp of vue and it's features. Cheers mate!
I don't leave likes/comments on RUclips/Facebook but you and this video is to good. Really appreciate - great work.
Thank you for putting this together, I really appreciate it. Just a quick note, if this is already 3 hours long, I wouldn't mind watching all the parts when you refactor the codes.
Your content and quality of the video is really great! Keep up the good work 👍🏽
Welcome to the community earthling 👽 Thanks for the positive feedback - You're the reason RUclipsrs like myself are motivated to keep creating content!
@@TheEarthIsSquare haha! Great to be here and thank you!
Man quality is top notch subscribed.
Thankyou :) Welcome to the community earthling 👽
Loved the tutorial and the Aussie accent. Good on ya
Absolute great course. Thanks!
Well-structured content. Love it!
I just realized you've only been putting these videos out for a few months. Keep it up. This structure is the best laid out Vue tutorial I've seen all year. I've been poking around with it for a while but I keep walking away from months at a time and I need to refresh each time I pick it back up again. I'd definitely love to watch one of your deep dives like this on Nuxt. While Vue is great, as I understand it the SEO of server side rendering that you get with Nuxt is far superior. For a guy like me who intends to design small business websites, this is immensely important. So, I feel like Nuxt is the way to go. BUT maybe someone reading this has some insight. Is Vue 3 better now?
Excellent Vue tutorial covered in 3 hours, Thanks for sharing.
Really really helpful! Thanks for doing this!
nice video man, in comparisson with other vuejs youtubers that ive seen, and even with much more subscribers. keep it going with the good work
Amazing tutorial,mate! I'm hoping to see more of your content in the future!
Also, do you have any recommendations of other tutorial videos about the new features of vue 3 you citated?
Thanks! ❤️ Honestly I would recommend just looking at the documentation and spend time trying to implement them one by one. Start with whatever seems the most exciting and interesting to try out!
AWESOME VIDEO !!! How do you create project structure for your projects?
I'm very happy I stumbled upon this! And thank you for skipping super basic stuff. Only thing I wish you had, was chapter spesific github repos. I like to code along, so having the same startingpoint for each video would have helped a lot wrt that. Keep up the good work!
Thanks Jonas! I'll keep the chapter repo's in mind as it's been mentioned by a few people, although ideally the tutorial should be used as more of a guide to learning the concepts and not something you feel forced to copy exactly.
I'm worried chapter repo's/commits will encourage people to just copy paste code to recreate the same website they see in the video, instead of learning the concepts and trying to make something more personal where they will learn more!
Thank you for this course, i just started ro learn vue and it was very helpfull. I wonder if i have lot of functions and computed .. do i have to return them or is there a way to group up these? And what about watchers?
Well done, mate. Clear overview about what to expect from vue3. Agree with Andrey about off-screen modifications, but great anyway.
Awesome stuff, would like to watch your video on Vue typescript and some more advanced vue concepts. Thank you for your effort.
Thanks Iaeeq! I think I'll definitely be planning a Vue TypeScript tutorial soon, keep an eye out!
Welcome to the community earthling 👽
Finished the video.. excellent content..
Very awesome! Great tutorial. Keep it up!
This is such a high quality content, you will reach 100k in no time!
👽 Thanks Aryan!
Awesome video and even at 1.5 times speed, I understood and learned the tutorial. Easily one of the best one on the latest Vue 3.
Hoping to learn the other stuff you mentioned towards the end like suspense, slots etc...Keep up the good work. May be provide a link if you appreciate donations :)
Thanks Anvita, your compliments mean a lot! I appreciate that you're interested in donating some money, and maybe sometime in the future we'll setup a Patreon - but for now, I'm more than happy to just spend my time helping people for free!
Thanks a lot for this amazing video. I'm a professional React Js Developer planning to move Vue3. This video makes an easy bridge for me. Thanks again. Cheers
amazing Crash course!!!
I would like to thank you for your great work. I have learned a clear concept of Vue 3.
Awesome Tutorial. What is the name of the extension that shows your css color preview while in .vue file
This is an amazing tutorial, just one suggestion please don't do "off-screen modification" in future tutorials because its very confusing as we encounter lot of errors.
You need to increase the font size a little bit, and also if you are going to refactor the code of the camera, you can create a branch for the different chapter so that no one gets left behind.
Great job ! Loving the way you learn. Waiting for the full stack tutorial !
Because if we self-learners want to showcase later our knowledge for some business or job inquiries, we want to get some fullstack skills, we can't only bring a frontend to show.
I know it's less appealing for viewers, but if you keep the most tricky parts for the end of the video on a 10 hour run, it's good, no ? XD
Like I would have loved some explanations on why and when using state variables and methods for example. If you still plan for the fullstack project, I would love to get a glimpse on how to use a solid design, even if we use some third-part API component (authentification, database)
And dont hesistate to make a break when you record, you were a bit exhausted in the end :D
you get some cool additional characters in your code by the IDE like that grey "guard" in the router guards. Is this some plugin or does it come with WebStorm?
Great course. i loved it.
Good job, thanks for sharing 🙏
Excellent tutorial, honestly one of the best course on youtube. One suggestion is to use a bit bigger font for video. Good Luck
absolutely amazing video
Been planning on starting Vue..this should do. Thanks.
That's awesome, Vue is a lot of fun and very powerful!
Welcome to the community earthling 👽
What an awesome tutorial, thank you Mitchell! :) Take your Vue.js projects to the next level and try Vuetify!
Thanks David! I'll keep Vuetify in mind for sure!
... and Ionic :)
Thanks a lot, it was very useful!
I have actually tried learning Vue before but I hated it in the end, but this wow I got up and running in just 1hr. Thanks and I really appreciate the effort
1:05:49 this should be the notification sound 😁
also thanks for the tutorial
Great course and great explanation!!
Btw what is the vscode theme, icons you are using ?
In react we have the context api, vue has something like that? Because i've seen people arguing that redux is not necessary since context api is a thing now.
Great tutorial, thank you so much its very helpful, liked, subscribed and waiting for more :)
Glad to hear it was useful! Welcome to the community earthling 👽
Wow. Wow. Wow. Incredible. Faved. Saved. Subbed.
Loved this video! Would love you could do a more advanced course, based in firebase, with auth, firestore, etc etc etc etc :) You're coming to Europe? Which country? :)
Thanks! - Welcome to the community earthling 👽
I don't have much experience with Firebase, but I'll keep it in mind!
I currently work for a company in Austria, so when covid allows me to travel I will be relocating to Vienna (hopefully by Jan/Feb)!
I like the speed, Time worth utilized. You are a cool one in rest of lot.
I was a little doubtful when I saw the thumbnail pic, but when I saw the video I loved it!
Awesome to hear you loved the video!
Curious though, what about the thumbnail made you doubtful? 🤔
THE BEST OUT THERE
What an awesome tutorial!
The refactoring was a surprise to me as I didn't expect it, I am going to push through as the course has been class so far, I am going to use the refactoring breaks to learn GIT properly.
Ohh well I am out, pretty much lost at 48 mins, the refactoring was a bit of a nightmare in the end, not sure beginner fits the bill when leaving people with very little knowledge to their own devices, could not get the TwootItem component working at all, sad face as I was actually enjoying the course
you are the best. Thanks fou ur time & effort. Liked and subscribed.
No, thank YOU Sardor :) Welcome to the community earthling 👽
Hi! I really like this tutorial. Very detailed and all, but I just have one question. When I reached chapter 8, for some reason, all my outputs were being duplicated. I would have two user profiles, twoot lists, Home's, etc. Would just like to ask if you know how to fix this? Thank you! Hope I get to learn more from you.
Good on ya Mitch ! Waiting for next one. (=)
Really good tutorial!!! thank you
Thanks, It really is an awesome tutorial!
Thanks Samrid! Welcome to the community earthling 👽
I'm using this tutorial for my first vue project! atm I'm building my first few components, but I don't understand exactly how you did debug so fast on 44:52 approximately. What tool exactly did you use?
Thanks a lot!
Using WebStorm? Hell yeah!
Hello and thanks for the great tutorial. Finished it yesterday.
I have a question. Is it possible to use the router and vuex from the very start of the project (after creating it in the project manager)? Or do I need to follow the steps as in tutorial and install router and vuex after the composition API? Thanks.
Hey Nemanja - Yes it is completely fine to install Router/Vuex the second you start a project. You don't even need to use the Composition API if you don't need/like it, same with Router/Vuex. Use whatever you like, whenever you like!
@@TheEarthIsSquare Thanks for the clarification. I will definitely use Composition API and Router. Still debating with my inner demons about Vuex. :)
I am working with a friend on a project. He is creating a backend API in Laravel and I am working on the front-end part in Vue 3. So, my Vue 3 app will be fed with data from the backend API. And I am not sure if I need to use Vuex or not with that backend API.
nice video dude, and may I ask what's your theme of webstorm? it's very clear and look nice
Thank you! The WebStorm theme is built using the Material Theme UI plugin with the Atom One Dark theme :)