Vue.js 2: Zero to Hero, Vuex Store, Vue CLI 3-Complete Guide
4.3 (16 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
96 students enrolled

Vue.js 2: Zero to Hero, Vuex Store, Vue CLI 3-Complete Guide

Learn Vue.js 2 from scratch with Vuex State management and Build Awesome, Fast, Real World Application with Vue.js
4.3 (16 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
96 students enrolled
Created by RapidDev Pro
Last updated 2/2020
English
English [Auto]
Current price: $17.99 Original price: $29.99 Discount: 40% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 5 hours on-demand video
  • 2 articles
  • 9 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll 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
Course content
Expand all 62 lectures 05:06:36
+ Installation & Tools Used
2 lectures 01:02
Tools used in this course
00:24
Install nodejs and npm
00:38
+ Modern Javascript Basics
5 lectures 43:07
Section Intro
00:43
Object and Array destructuring
06:10
Spread Operator
09:04
'this' keyword in Regular vs Arrow Function
13:37
Async Await Vs Promise
13:33
+ Vue Js Basics
13 lectures 54:16
Where to find source code ?
00:07
Getting started with Vue JS: Creating Vue App
05:42
Two way data binding using v-model
02:20
Conditional Rendering
04:31
v-bind directive
03:29
Event handling and Methods
04:46
List Rendering
04:03
Dynamic Class Styling
04:43
Computed Properties
06:33
Filters
02:06
Components
07:49
Lifecycle Hooks
04:25
'this' keyword in Vue Instance
03:42
+ Creating Real World App With Vue CLI 3
19 lectures 01:36:37
Project Overview
02:39
Installing Vue CLI
01:02
Creating/Setting up App with Vue CLI
01:53
Project Structure
03:44
Integrating Bootstrap Vue
02:16
App Header Component
03:49
Setting up App Layout
04:45
Add Product Form UI
07:10
Add Product Form Validation
09:41
Setup JSON Server - REST Endpoints
04:40
Fetch product list from REST Endpoint
04:34
Parent Child Component
02:11
Add product functionality
08:09
Delete Product functionality
07:44
Update Product Part-1
07:34
Update Product Part-2
06:41
Update Product Part-3
06:09
+ Vuex State Management and Vue Router
20 lectures 01:49:08
Project Overview: Vuex + Vue Routing
01:02
What is Vuex and What problem does it solve
05:15
Vue Devtools
01:50
Setting up project with Vuex and Vue Router
06:08
Setting up Product Manager App with Vue Router and UI
14:45
ESLint Config Update
00:53
Creating State in Vuex Store
08:14
Implementing mapState
03:34
Implementing Getters and mapGetters
05:47
Set Products Action and Mutation
09:01
Add Product Action and Mutation
05:08
Delete Product Actions and Mutation
04:01
Update Product Actions and Mutations
05:38
Implementing mapActions
02:50
Vuex Strict Mode
04:39
Managing Spinners and Loader
08:52
Implementing Mixins and Toast UI
14:39
Environment Variables
03:50
Fixing ESLint errors
01:46
Building Vue JS App in Production Mode
01:16
+ SOURCE CODE
2 lectures 00:27
SOURCE CODE
00:24
BONUS LECTURE
00:03
Requirements
  • Very basic understanding of HTML, CSS, and JavaScript
Description

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.

The state, the source of truth that drives our app.
The view, a declarative mapping of the state.
The actions, the possible ways the state could change in reaction to user inputs from the view.


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 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:
  • Javascript lovers who want to learn Vue JS from scratch