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

RapidDev Pro, Full Stack Developer & Tech Entrepreneur

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
60 Lessons (5h 6m)
    • 1. Introduction

      1:58
    • 2. Tools used in this course

      0:24
    • 3. Install nodejs and npm

      0:38
    • 4. Section Intro

      0:43
    • 5. Object and Array destructuring

      6:09
    • 6. Spread Operator

      9:04
    • 7. 'this' keyword in Regular vs Arrow Function

      13:37
    • 8. Async Await Vs Promise

      13:33
    • 9. Getting started with Vue JS: Creating Vue App

      5:42
    • 10. Two way data binding using v-model

      2:20
    • 11. Conditional Rendering

      4:31
    • 12. v-bind directive

      3:29
    • 13. Event handling and Methods

      4:46
    • 14. List Rendering

      4:03
    • 15. Dynamic Class Styling

      4:43
    • 16. Computed Properties

      6:33
    • 17. Filters

      2:06
    • 18. Components

      7:49
    • 19. Lifecycle Hooks

      4:25
    • 20. 'this' keyword in Vue Instance

      3:42
    • 21. Project Overview

      2:39
    • 22. Installing Vue CLI

      1:02
    • 23. Creating/Setting up App with Vue CLI

      1:53
    • 24. Project Structure

      3:44
    • 25. Integrating Bootstrap Vue

      2:16
    • 26. App Header Component

      3:49
    • 27. Setting up App Layout

      4:45
    • 28. Add Product Form UI

      7:10
    • 29. Handling ESLint warnings

      3:34
    • 30. Add Product Form Validation

      9:41
    • 31. Setup JSON Server - REST Endpoints

      4:40
    • 32. Fetch product list from REST Endpoint

      4:34
    • 33. Parent Child Component

      2:11
    • 34. Passing Props to list product component

      8:13
    • 35. Add product functionality

      8:09
    • 36. Delete Product functionality

      7:44
    • 37. Update Product Part-1

      7:34
    • 38. Update Product Part-2

      6:41
    • 39. Update Product Part-3

      6:09
    • 40. Project Overview: Vuex + Vue Routing

      1:02
    • 41. What is Vuex and What problem does it solve

      5:14
    • 42. Vue Devtools

      1:50
    • 43. Setting up project with Vuex and Vue Router

      6:08
    • 44. Setting up Product Manager App with Vue Router and UI

      14:45
    • 45. ESLint Config Update

      0:53
    • 46. Creating State in Vuex Store

      8:14
    • 47. Implementing mapState

      3:34
    • 48. Implementing Getters and mapGetters

      5:47
    • 49. Set Products Action and Mutation

      9:01
    • 50. Add Product Action and Mutation

      5:08
    • 51. Delete Product Actions and Mutation

      4:01
    • 52. Update Product Actions and Mutations

      5:38
    • 53. Implementing mapActions

      2:50
    • 54. Vuex Strict Mode

      4:39
    • 55. Managing Spinners and Loader

      8:52
    • 56. Implementing Mixins and Toast UI

      14:39
    • 57. Environment Variables

      3:50
    • 58. Fixing ESLint errors

      1:46
    • 59. Building Vue JS App in Production Mode

      1:16
    • 60. SOURCE CODE

      0:24

About This Class

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 devtools 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 Real World Application with Vue jS and Vuex state mangement 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