Vue.js Course for Beginners [2021 Tutorial]

Ecommerce Empire Academy

Learn Vue 3 by in this full course. Vue.js is an open-source model–view–view model front end JavaScript framework for building user interfaces and single-page applications.

💻 Code – Static:
💻 Code – Basic Product Cart:
💻 Code – CLI Product Cart:

✏️ Course developed by Gwen Faraday. Check out her channel:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:01:03) What is Vue.js?
⌨️ (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

Learn to code for free and get a developer job:

Read hundreds of articles on programming:

And subscribe for new videos on technology every day:

34 thoughts on “Vue.js Course for Beginners [2021 Tutorial]”

  1. Hey everyone! Hope you enjoy this video for freeCodeCamp . If you want more Vue.js and coding content, check out my channel and let me know if you have a topic request. I keep a backlog of ideas 🙂

    1. Great video! Very helpful and wonderful introduction to Vue. Can you please post the link to the Vuex course here?

    2. Dinesh Buruboyina

      can I get a project demo on
      Clicking on the webpage should create a dot and should create a line between every consecutive dot clicked ultimately resulting in a square

  2. 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!

  3. Thanks for this course!
    Some contents are not listed, and the Components mistyped time is breaking some chapters.
    I think it goes as follows:

    *Intro*
    ⌨️ (0:00:00) Introduction
    ⌨️ (0:01:03) What is Vue.js?
    ⌨️ (0:05:40) Vue 3 Setup

    *Basic usage*
    ⌨️ (0:12:17) Vue JS Directives
    ⌨️ (0:19:48) Events and Methods
    ⌨️ (0:29:20) Components
    ⌨️ (0:39:27) Component Props
    ⌨️ (0:57:30) Loops
    ⌨️ (1:06:09) Lifecycle Hooks

    *Adding Vue.js to a static site*
    ⌨️ (1:14:30) App Demo
    ⌨️ (1:26:45) Adding Items to Cart
    ⌨️ (1:43:22) Dynamic Content
    ⌨️ (2:15:54) Reuseable Components

    *Single Page Application with Vue CLI*
    ⌨️ (2:26:20) Vue CLI
    ⌨️ (2:32:48) Vue Folder Structure
    ⌨️ (2:43:58) Top Nav
    ⌨️ (2:48:45) Styling with SASS
    ⌨️ (3:00:25) Application Pages
    ⌨️ (3:06:07) Sidebar
    ⌨️ (3:20:46) Adding Items to Cart
    ⌨️ (3:24:46) Finishing Up (Card component)


    Great content. I was a little intimidated at the beginning, with the super-complex form, but from the App Demo onwards things became clearer. Liked very much the approach. 🙂

  4. Awesome tutorial! The flow of concepts feels very natural and progressive. PRO TIP: watch at 1.25 speed and save a quarter of the view time, she still sounds natural. 😀

  5. I recently created a html component using vue for the company I work for (mainly for my benefit of actually getting vue experience).

    I was able to implement a template containing a html table (rows of data with a column for a item and a column for number of items)

    Further to this I implement a drop down which had an onchange Ajax event which changed the counts in the mentioned html table.

    I did this using vues v-for, v-if and value attributes.

    I was impressed with how easily you can populated the DOM with data for both tables and drop downs!

    Looking forward to next implementing a template with a vue component (ie a more complex interface)

    All of this I did without using the CLI as I have zero node experience

  6. Thank you for creating such a clear and engaging tutorial. It really helped me to understand some of the key concepts of Vue and has stood me in good stead as I start to build my app. You have a rare talent for teaching, and presenting ideas in a concise but clear way. I will be on the look out for more of your tutorials.

  7. Thank you so much for this course Gwen. I don’t know if you remember me but I was part of your React.js class you taught at Kenzie Academy last year. I loved learning React from you, and I am excited to get started on this course, learning from you again! Most popular Vue course on the internet! That’s awesome!

  8. 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.

  9. 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 ! ♥

  10. CHITUS💖⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻⸻

    Great course!
    It really helps to get the basic Vue knowledge.

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

  12. Sayed Ahmad Nawid

    @everyone, This tutorial structured very well using real world common daily facing problems. I recommend to watch and practice along the way. It is one of the great tutorial I have ever seen.

  13. 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.

  14. Hussein Hammoud

    I like the way you teach programming, thanks for the effort you put on this video

Comments are closed.