Vue.JS the complete guide 2020

  • Course level: Beginner


Learn Vue.js 2 from scratch with Vuex State management library and Build Awesome Real World Application with Vue JS

What is Vue.js?

Vue.js is an open-source JavaScript framework for building user interfaces and single-page applications

What is Vuex?

Vuex is a state management pattern + library for Vue.js applications. It serves as a centralized store for all the components in an application, with rules ensuring that the state can only be mutated in a predictable fashion. It also integrates with Vue’s official dev tools extension to provide advanced features such as zero-config time-travel debugging and state snapshot export/import.

Advantages of Vue Js Framework:

♦ Approachable

Already know HTML, CSS, and JavaScript? Read the guide and start building things in no time!

♦ Versatile

An incrementally adoptable ecosystem that scales between a library and a full-featured framework.

♦ Performant

20KB min+gzip Runtime, Blazing Fast Virtual DOM, Minimal Optimization Efforts

You will learn the following things in the course:

♦ Build a Real-World Application with Vue jS and Vuex state management library.

♦ Learn Vue.JS 2 concepts such as directives, methods, computed properties, two-way data binding, conditional rendering, dynamic classes, props, events, filters, life cycle hooks, and much more.

♦ Learn to create Single-Page-Application (SPA) with Vue Routing

♦ Learn how to communicate between parent-child components using Props and Events.

♦ Understand Vuex State management library concepts such as Actions, Mutations, Getters, State.

♦ Learn how to architect user interface into re-usable components.

♦ Understand all lifecycle hooks provided by the Vue Js.

♦ Learn mapAction, mapState and mapGetters in Vuex.

♦ Learn to manage Environment variables in various modes such as development and production.

♦ Form validation in Vue.JS

♦ Learn about Mixins in Vue.JS.

♦ Integrate bootstrap-vue library to create awesome UI in Vue JS.

♦ and more

Who this course is for:

  1. Javascript lovers who want to learn Vue JS from scratch

What Will I Learn?

  • Learn how to communicate between parent-child components using Props and Events
  • Vue JS Concepts such as directives, methods, computed properties, two way data binding, conditional rendering, dynamic classes, props, events, filters, life cycle hooks
  • Vuex State management library concepts such as Actions, Mutations, Getters, State
  • Build Real World App with Vue JS
  • Vue Js Framework from scratch
  • Build Vue Js in Production mode
  • Learn mapAction, mapState and mapGetters in Vuex
  • Form Validation in Vue JS
  • Create awesome UI with bootstrap-vue library
  • Learn how to solve complex Props and Events flow between components with the help of Vuex library
  • Master every concepts of Vue JS Framework
  • Build scalable apps with state management

Topics for this course

44 Lessons

Vue JS 2

The Vue Instance00:00:00
Data & Methods00:00:00
Data Binding00:00:00
Event Modifiers00:00:00
Keyboard Events00:00:00
Two-Way Data Binding00:00:00
Computed Properties00:00:00
Dynamic CSS Classes00:00:00
Looping with v-for00:00:00
Simple Punchbag Game00:00:00
Multiple Vue Instances00:00:00
Intro to Components00:00:00
The Vue CLI00:00:00
Vue Files & The Root Component00:00:00
Nesting Components00:00:00
Component CSS (scoped)00:00:00
Nesting Components Examples00:00:00
Primitive vs Reference Types00:00:00
Events (child to parent)00:00:00
The Event Bus00:00:00
Life-cycle Hooks00:00:00
Dynamic Components00:00:00
Input Binding (Creating a blog, part 1)00:00:00
Checkbox Binding00:00:00
Select Box Binding00:00:00
HTTP Requests00:00:00
GET Requests00:00:00
Custom Directives00:00:00
Custom Search Filter00:00:00
Registering Things Locally00:00:00
Setting up Routing00:00:00
Hash vs History (Routing)00:00:00
Adding Router Links00:00:00
Route Parameters00:00:00
Posting to Firebase00:00:00
Retrieving Posts from Firebase00:00:00
Vue.JS 2
40 £

Enrolment validity: Lifetime


  • Very basic understanding of HTML, CSS, and JavaScript