Vue 3 Tutorial for Beginners - Learn Vue in 3 Hours (FULL COURSE)
ฝัง
- เผยแพร่เมื่อ 19 ก.ค. 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
TH-cam → / 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 - วิทยาศาสตร์และเทคโนโลยี
![Vue.js Course for Beginners [2021 Tutorial]](http://i.ytimg.com/vi/FXpIoQ_rT_c/mqdefault.jpg)
![ไหล่อ่อน (Soft Shoulder) - Atom ชนกันต์ [OFFICIAL MV]](http://i.ytimg.com/vi/HUWl53msBQY/mqdefault.jpg)
![THE TOYS x NONT TANONT - ดอกไม้ที่รอฝน (spring) [Official MV]](http://i.ytimg.com/vi/pPa1d5cC8M4/mqdefault.jpg)
![เจอประจำ ตอน พักเที่ยง [EP.32]](http://i.ytimg.com/vi/jvqk6uJoVks/mqdefault.jpg)
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
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"
This is by far the best, well covered, simplest tutorial I've ever watched about Vue. Thank you
This is the best Vue3 tutorial I came across on TH-cam. 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?
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 TH-cam career!
Thanks so much! Welcome to the community :)
The most magnificent tutorial I've ever seen in my life!!! Keep it up!
This is one of the best coding tutorials i've ever watched! Thank you!
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!
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 :)
Spent new year's eve watching this video as we transitioned into 2021. Great stuff Mitchell. Thanks a ton. Cheers.
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 !!
Excellent Tutorial with a Streamlined approach from Starting to Hosting.
Thanks Nirmal! Welcome to the community earthling 👽
Amazing tutorial man. I loved the way you explained things and providing details. Looking forward for your React tutorials as well.
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.
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 👽
awesome tutorial, upto the point on whats required to learn vue3 and vuex 4 along with composition api. Thanks Mitchell for this!
Thank you so much for your greatest gift, mate! Just learned Vue 3 in a chilling Christmas night.
This is so lovely and easy on for beginners. Starting from basic to production. And nice graphics too
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 :)
Excellent work! I did know nothing about Vue and now I feel more comfortable to start coding with Vue.
Thanks a lot!
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.
I watched a lot of Videos about VUE. But yours was really the best and made it possible to set up my app
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.
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?
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.
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!
At the outset I liked your friendly conversational tone. The tut is also great. Thanks.
Wow, thank you...
I started learn vue js a week ago and your video help me a lot to understand this framework....
Absolute great course. Thanks!
This was awesome! Great tutorial, looking forward to more.
Thanks Wayne, welcome to the community!
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.
A great tutorial every second of the tutorial is priceless. Really appreciate the efforts.
Thanks a ton! Welcome to the community :)
This is an amazing tutorial, I have been looking for review materials for Vue, which are very helpful!
Glad it was helpful! ❤️
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!
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!
This is what exactly I looked for. Thank you so much!
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
Really digged this tutorial, thank you very much! Subscribed!
Well done, mate. Clear overview about what to expect from vue3. Agree with Andrey about off-screen modifications, but great anyway.
great work, nice to see such a great course on vue to start with, appreciate your work and effort
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
Very high quality tutorial, I just wish you'd have a commit for each chapter on the github repo
Excellent tutorial, honestly one of the best course on youtube. One suggestion is to use a bit bigger font for video. Good Luck
This video is f*********cking dope! I instantly understood vue. Flow was perfect! Keep it up!
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
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 👽
i've done this course, cant wait to see the fullstack version
wow what a great tutorial. so glad I found this channel. thank you!
I don't leave likes/comments on TH-cam/Facebook but you and this video is to good. Really appreciate - great 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!
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
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 TH-camrs like myself are motivated to keep creating content!
@@TheEarthIsSquare haha! Great to be here and thank you!
great tutorial. I learned a lot from your course especially Vuex and Routing.
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
Excellent Vue tutorial covered in 3 hours, Thanks for sharing.
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.
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.
subscribed at "welcome to twotter!" moment :D
I would like to thank you for your great work. I have learned a clear concept of Vue 3.
Regarding the folder in a folder problem, you could first create the project on your computer using the Vue CLI. Then create the github repo on Github.com.
You can then in the root of your project, run from the terminal: git add remote origin
This will link the project on your computer to the remote project on github :)
Edit: Typos
Welcome to the community earthling 👽
I agree! I was trying to be conscious of not using the terminal too much (especially Git within the terminal), because I don't want to overwhelm beginners.
I think creating the GitHub account, and then a Git repo, and then cloning, and then the Vue project, lays out the process in a way that's *hopefully* easy to follow as someone new to Vue/front end development.
Man quality is top notch subscribed.
Thankyou :) Welcome to the community earthling 👽
Really loving it. the way you explain.
Amazing content, Thanks looing forward to next series on vue
This is such a high quality content, you will reach 100k in no time!
👽 Thanks Aryan!
To save you the need of adding state prefix to you variables on the template, you can do spread operator of state in return { ...state}
one suggestion, you could use json-server instead of a mock js file. that library is amazing for testing things and for a crash course I think interacting with a backend (fake in this case) is really needed. I am a react developer in the process of learning vue also and I found your tutorial amazing, just wanted to share some suggestion because the most difficult part to learn in react for me was lazy loading and interacting with an API.
greets! and sorry for my English haha
👽 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.
Thanks for the course brother. Right course at right time. Liked and Subscribed.
Would love to see similar one video or a playlist for Django development. And one fullstack development with Django and vue or react
Well-structured content. Love it!
Loved the tutorial and the Aussie accent. Good on ya
I like the speed, Time worth utilized. You are a cool one in rest of lot.
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)!
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 :)
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 👽
Really really helpful! Thanks for doing this!
Awesome tutorial... Thanks 👍 please always zoom in your text editor so we could see well
Thanks for the tuts. Please zoom in on the IDE or increase the font size next time so that we can clearly see the code. Once more, thanks. I've learned a lot.
Very awesome! Great tutorial. Keep it up!
Finished the video.. excellent content..
Great tutorial man! Just a suggestion: could you increase the font size of your editor a bit? It's a bit difficult to read
Sabya Bhoi - I was about to make the same suggestion. I have to put TH-cam into full-screen mode to be able to read the text (which is STILL not easy to read because it is still small and somewhat blurry) and then exit full-screen mode to edit my code to make the changes and that gets very tedious since I have to go back and forth several times for larger changes. I would like to see the font size at least double what you are using now.
I should note that your video is far from the only one that uses fonts that are far too small for comfort but it's a real pain every time I encounter this. It makes the process of learning substantially slower than it needs to be. That's a shame when the course is as good as this one is.
Something that might help reduce the difficulties here would be to post all the code somewhere so that I could just copy/paste it into my own editor but I should stress that the font in the video still needs to be at least twice as big as it currently is so that people can see what you're writing.
@@hughmungus1767 HIGH MUNGUS!
Subscribed coz of such a huge effort and time into making this Vue tutorial. Awesome content.
👽 Thanks Valir! Welcome to the community Earthling.
The Earth is Square Hope that your channel will grow big.
Excellent intro to what vue. Just trying to work with Vue for .NET API. Vue looks simplier than React
Thanks for the awesome tutorial, there are people already complaining that you made some off screen changes, which I can understand. However, it would be awesome if you could still add these files to the git repo as backup, so we can just copy the stuff.
Good job, thanks for sharing 🙏
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? 🤔
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 👽
Awesome tutorial! I'm currently learning more about Vue because this vídeo. I just think that you have to try VSCode, for JavaScript the JetBrains IDEs are very strange
Thanks Diego ❤️ I definitely have used the VSCode IDE in the past but I have always just preferred the JetBrains/Webstorm look and feel :) Only downside for me is that it can sometimes be a bit heavy to run but as long as you have a decent computer/laptop this shouldn't be an issue.
Good luck with your Vue journey!
VUE 3 IS OUT🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉
Released a day after this tutorial was uploaded, what a happy coincidence!
Welcome to the community earthling 👽
This is a very well done video. This is a pretty good alternative than reading a book.
Thanks Jerico, welcome to the community!
Great course and great explanation!!
Btw what is the vscode theme, icons you are using ?
Instereting, you explain very well.
I'm a django Developer getting started with Vue looking forward for more videos.
Thanks
Video Proposal:
-A tutorial on building a very beautiful Frontend with Vue🤗
-Working with Vue and Django api❤ and best way to deploy both on a single domain.
Hey Academy Omen!
I actually started web development with Django, so it'll always hold a special place in my heart. Eventually doing a full Django course has always been on my list of planned videos, but now I'll also see if I can plan a special video about using Vue 3 with Django!
Welcome to the community earthling 👽
@@TheEarthIsSquare Thanks man
Vue3 with django 3 wud be awesome! Looking forward for it
The Earth is Square along with django restframework
You earned one more subscriber.
Keep up the good work.
Welcome to the community earthling 👽
Great course. i loved it.
Thanks a lot, it was very useful!
AWESOME VIDEO !!! How do you create project structure for your projects?
absolutely amazing video
amazing Crash course!!!
Thanks, It really is an awesome tutorial!
Thanks Samrid! Welcome to the community earthling 👽
Really good tutorial!!! thank you
you are the best. Thanks fou ur time & effort. Liked and subscribed.
No, thank YOU Sardor :) Welcome to the community earthling 👽