Vue.js Course for Beginners [2021 Tutorial]

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:05:40) Vue 3 Setup
⌨️ (0:12:17) Vue JS Directives
⌨️ (0:19:48) Events and Methods
⌨️ (1:29:20) Components
⌨️ (0:39:27) Component Props
⌨️ (1:06:09) Lifecycle Hooks
⌨️ (1:14:30) App Demo
⌨️ (1:26:45) Adding Items to Cart
⌨️ (2:15:54) Reuseable Components
⌨️ (2:26:20) Vue CLI
⌨️ (2:32:48) Vue Folder Structure
⌨️ (2:43:58) Top Nav
⌨️ (2:48:45) Styling with SASS
⌨️ (3:06:07) Sidebar
⌨️ (3:20:46) Adding Items to Cart

🎉 Thanks to our Champion and Sponsor supporters:
👾 Wong Voon jinq
👾 hexploitation
👾 Katia Moran
👾 BlckPhantom
👾 Nick Raker
👾 Otis Morgan
👾 DeezMaster
👾 AppWrite

--

[tthtlc]

i find your way of teaching so exciting and catching my FULL attention all the time: making mistakes, showing the results of the mistakes, explaining it, and then correcting it, and repeating mistakes is different and it just makes me learn SO MUCH.

[Bigman]

I like how you didn't edit out mistakes you made. This only adds to the learning experience. Great job! Tnx!

[tomstock]

This lengthy tutorial was relaxing and very pleasant to listen to as well as incredibly informative. Thank you so much for this.

[bonnyboet]

Thank you for this course! As a non-native English speaker I really appreciate your clear way of speaking and keeping to the main points. It made it really easy to understand.

[chopman]

I'm really enjoying the course so far! However, you have a typo in your chapter listings. Components are listed as starting at 1:29:20, but it should be 29:20...it's causing the following chapters to be out of sync. Thanks, and keep up the good work!

[jakebush]

This is the best video I have found for Vue 3. My company gives us full access to PluralSight and there's nothing even close to as good as this on there. WELL DONE.

[yassertarek]

A great Course in a great way which at first seemed to me to be sloppy, but with perseverance everything became clear. Thanks a lot ! ♥

[zoltanhorvathandsomenumbers]

I really appreciate Gwen's calm voice and her straightforward style. Very good tutorial, I really enjoyed it! :)

[WowaDreamer]

This is a great tutorial! Well paced <3

[jesussandoval]

Your voice is so soothing when you speak. I learned a lot from this tutorial and you earned a follower. Thank you!

[gueyenono]

I just completed the course. Thank you very much. It was excellent!

[MissBoom]

Fantastic course thank you! This was my first delve into using Vue and you explained everything very well 🔥

[goofy]

In just 30 minutes of video I was able to learn so much in Vue, thanks.

[brokko_le]

I'm glad you start of saying that Vue can be used to slowly upgrade older software without needing a complete rewrite from the start. I've looked at angular in the past and that was exactly what I was afraid of. I more or less picked Vue based on first impressions, but I wasn't sure about this. A whole rewrite would simply be too much. Your first examples putting Vue in script tags within HTML page takes a load of my mind too. I was getting the idea that having separate js files was the only way, not just good practice. Every other tutorial did it like that. Separating JS from the HTML by itself would also already be a huge overhaul, so I love knowing I can quite safely upgrade everything step by step and page by page even. Thanks. Now I know I picked the right tool.

[maxrichard]

Great course.
Enjoyed it very much to the end!
Waiting for more!!!

[erwinaditya]

OMG! what I was waiting for from the previous version is here

[ListenAlQuran]

the looks so awesome.... love your recordings to such an extent!

[rachelsensenig]

This was a great course - very clear. I liked being stepped through creating Vue on an HTML file up through creating an app using Vue CLI. I also appreciated being shown how to debug using the Vue dev tools. For those about to watch this video - make sure you have this on your browser before you start!

[TlNYDlCK]

To fix the icon issue in the ProductCard.vue class in the html tag you will want set the <i> tag just under <div class="card-body"> to be :class="class_type". So it will look like:
<i :class="class_type"></i>
And then in the scripts in the data function you'll want to add a class_type variable using a template literal with the class you want. So data() looks like:
data () {
return {
quantity: 0,
class_type: `icofont-10x
}
}

[senatorcox]

Thanks very much, great course, I like the concept and how you highlighted problems that can be encountered using the Vue CDN but then solve them all in your CLI version of the course.