Vue - The Complete Guide (w/ Router, Vuex, Composition API)

BY
Eduonix

Learn about the Vuejs framework and how it combines the features of Angular and React to develop front-end applications.

Mode

Online

Quick Facts

particular details
Medium of instructions English
Mode of learning Self study
Mode of Delivery Video and Text Based

Course overview

VueJS is a compact, clean, data-driven, and reactive front-end ViewModel that may help individuals get their app started quickly. Vue depends on HTML, CSS, and JavaScript rather than complex languages. It also does not have tough challenges like other frameworks, and it is extremely adaptable. VueJS also integrates well with other frameworks and technologies, allowing it to be used in cooperation with other back-end frameworks like Angular 2 and ReactJS.

Vue - The Complete Guide (w/ Router, Vuex, Composition API) certification course is created by Max - Web Developer, Consultant & Instructor and presented by Eduonix, an ed-tech company providing high-quality technology training content and methodology. The course is created to be a comprehensive overview that will serve as an excellent introduction to front-end frameworks in general. 

Vue - The Complete Guide (w/ Router, Vuex, Composition API) online course starts with simple concepts like "what is VueJS and how it works" and goes on to more sophisticated and advanced topics like state management, app deployment, and so on.

The highlights

  • Self-paced course
  • English videos with subtitles
  • 30-day money-back guarantee
  • Accessible on portable devices

Program offerings

  • Self-paced course
  • English videos with subtitles
  • Pre-recorded video content
  • 30-day money-back guarantee
  • Lifetime membership available
  • Accessible on portable devices

Course and certificate fees

certificate availability

No

Who it is for

What you will learn

Web application development skills

After completing Vue - The Complete Guide (w/ Router, Vuex, Composition API) online certification, candidates will get a deep knowledge of Vuejs and its fundamentals, make use of components and what components, to begin with. Candidates will be able to create a development environment with a Workflow, form Input Binding, DOM interaction. Candidates will be skilled at enhancing the appearance of applications using animations and transitions, using Vuex to improve state management, building a fantastic Single-Page-Application (SPA) using Routing, and deploying their applications. 

The syllabus

Section 1 : Getting Started

  • Welcome to the Course
  • What is & Vue.js?
  • Different Ways of Using Vue
  • Exploring Vue Alternatives
  • Building A First App With Just JavaScript
  • Re-building the App with Vue
  • Vue vs "Vanilla JavaScript" (just JavaScript)
  • Setting Up the Course Development Environment
  • Course Outline & What's In The Course
  • How To Get The Most Out Of This Course
  • Module Resources

Section 2 : Basics & Core Concepts - DOM Interaction with Vue

  • Module Introduction
  • Creating and Connecting Vue App Instances
  • Interpolation and Data Binding
  • Binding Attributes with the "v-bind" Directive
  • Understanding "methods" in Vue Apps
  • Working with Data inside of a Vue App
  • Outputting Raw HTML Content with v-html
  • A First Summary
  • Understanding Event Binding
  • Time to Practice: Data Binding
  • Events & Methods
  • Working with Event Arguments
  • Using the Native Event Object
  • Exploring Event Modifiers
  • Locking Content with v-once
  • Data Binding + Event Binding = Two-Way Binding
  • Methods used for Data Binding: How It Works
  • Time to Practice: Event Binding
  • Introducing Computed Properties
  • Working with Watchers
  • Methods vs Computed Properties vs Watchers
  • v-bind and v-on Shorthands
  • Dynamic Styling with Inline Styles
  • Adding CSS Classes Dynamically
  • Classes & Computed Properties
  • Time to Practice: Reactivity
  • Dynamic Classes: Array Syntax
  • Module Summary
  • Time to Practice: Dynamic Styling

Section 3 : Rendering Conditional Content & Lists

  • Module Introduction
  • Understanding the Problem
  • Rendering Content Conditionally
  • v-if, v-else and v-else-if
  • Using v-show Instead Of v-if
  • Rendering Lists of Data
  • Diving Deeper Into v-for
  • Removing List Items
  • Lists & Keys
  • Time to Practice: Conditional Content & Lists
  • Module Summary

Section 4 : Course Project: The Monster Slayer Game

  • Module Introduction
  • Project Setup & First Methods
  • Updating the Health Bars
  • Adding a "Special Attack"
  • Adding a "Heal" Functionality
  • Adding a "Game Over" Screen
  • Finishing the Core Functionality
  • Adding a Battle Log
  • Module Resources

Section 5 : Vue: Behind the Scenes

  • Module Introduction
  • An Introduction to Vue's Reactivity
  • Vue Reactivity: A Deep Dive
  • One App vs Multiple Apps
  • Understanding Templates
  • Working with Refs
  • How Vue Updates the DOM
  • Vue App Lifecycle - Theory
  • Vue App Lifecycle - Practice
  • Module Resources

Section 6 : Introducing Components

  • Module Introduction
  • Understanding the Problem
  • Introducing Components
  • The Why: Building Complex User Interfaces With Components

Section 7 : Moving to a Better Development Setup & Workflow with the Vue CLI

  • Module Introduction
  • Why We Need A Development Server
  • Why We Want A Better Developer Experience
  • Installing & Using the Vue CLI
  • Inspecting the Created Project
  • Inspecting the Vue Code & ".vue" Files
  • Adding the "Vetur" Extension to VS Code
  • More on ".vue" Files
  • A New Vue Project
  • Creating a Basic Vue App
  • Adding a Component
  • Adding Styling

Section 8 : Component Communication

  • Module Introduction
  • Introducing "Props" (Parent => Child Communication)
  • Prop Behavior & Changing Props
  • Validating Props
  • Working with Dynamic Prop Values
  • Emitting Custom Events (Child => Parent Communication)
  • Defining & Validating Custom Events
  • Prop / Event Fallthrough & Binding All Props
  • Demo: Adding Components & Connecting Them
  • Demo: Adding More Component Communication
  • Time to Practice: Props & Custom Events
  • A Potential Problem
  • Provide + Inject To The Rescue
  • Provide + Inject for Functions / Methods
  • Provide + Inject vs Props & Custom Events
  • Module Summary

Section 9: Diving Deeper Into Components

  • Module Introduction
  • Project Setup
  • Global vs Local Components
  • Scoped Styles
  • Introducing Slots
  • Named Slots
  • Slot Styles & Compilation
  • More on Slots
  • Scoped Slots
  • Dynamic Components
  • Keeping Dynamic Components Alive
  • Applying What We Know & A Problem
  • Teleporting Elements
  • Working with Fragments
  • The Vue Style Guide
  • Moving to a Different Folder Structure
  • Module Summary

Section 10 : Course Project: The Learning Resources App

  • Module Introduction
  • Setup & First Steps
  • First Components & Props
  • Styling and More Components
  • Header & BaseCard Components
  • Adding a Base Button
  • Dynamic Components & Attribute Fallthrough
  • Adding & Styling Tabs
  • Adding a Form
  • Fetching User Input
  • Adding a Modal Dialog
  • Deleting Items
  • Adding "Teleport"

Section 11: Forms

  • Module Introduction
  • v-model & Inputs
  • Working with v-model Modifiers and Numbers
  • v-model and Dropdowns
  • Using v-model with Checkboxes & Radiobuttons
  • Adding Basic Form Validation
  • Building a Custom Control Component
  • Using v-model on Custom Components
  • Module Summary

Section 12: Sending Http Requests

  • Module Introduction
  • Starting App & Why we need a Backend
  • Adding a Backend
  • How To (Not) Send Http Requests
  • Sending a POST Request to Store Data
  • Getting Data (GET Request) & Transforming Response Data
  • Loading Data When a Component Mounts
  • Showing a "Loading..." Message
  • Handling the "No Data" State
  • Handling Technical / Browser-side Errors
  • Handling Error Responses
  • Module Summary

Section 13 : Routing: Building Multi Page Single Page Applications

  • Module Introduction
  • What & Why?
  • Routing Setup
  • Registering & Rendering Routes
  • Navigating with router-link
  • Styling Active Links
  • Programmatic Navigation
  • Passing Data with Route Params (Dynamic Segments)
  • Navigation & Dynamic Paths
  • Updating Params Data with Watchers
  • Passing Params as Props
  • Redirecting & "Catch All" Routes
  • Using Nested Routes
  • More Fun with Named Routes & Location Objects
  • Using Query Params
  • Rendering Multiple Routes with Named Router Views
  • Controlling Scroll Behavior
  • Introducing Navigation Guards
  • Diving Deeper Into Navigation Guards
  • The Global "afterEach" Guard
  • Beyond Entering: Route Leave Guards
  • Utilizing Route Metadata
  • Organizing Route Files
  • Summary

Section 14: Animations & Transitions

  • Module Introduction
  • Animation Basics & CSS Transitions
  • Understanding CSS Animations
  • Why Is "Just CSS" Not Enough?
  • Playing CSS Animations with Vue's Help
  • Using the Transition Component
  • CSS Animations with the Transition Component
  • Using Custom CSS Class Names
  • Example: Animating a Modal
  • Transitioning Between Multiple Elements
  • Using Transition Events
  • Building JavaScript Transitions (instead of CSS)
  • Disabling CSS Transitions
  • Getting Started with Animated Lists
  • Animating Lists with "transition-group"
  • Animate List Item Movement
  • Animating Route Changes

Section 15: Vuex

  • Module Introduction
  • What & Why?
  • Creating & Using a Store
  • Connecting Components to State
  • Introducing Mutations - A Better Way of Changing Data
  • Passing Data to Mutations with Payloads
  • Introducing Getters - A Better Way Of Getting Data
  • Running Async Code with Actions
  • Understanding the Action "Context"
  • Using Mapper Helpers
  • Example: Adding More State
  • Organizing your Store with Modules
  • Understanding Local Module State
  • Namespacing Modules
  • Structuring Vuex Code & Files
  • A Challenge!
  • Challenge Solution (1/3)
  • Challenge Solution (2/3)
  • Challenge Solution (3/3)
  • Summary

Section 16 : Main Project Find a Coach Wep App

  • Module Introduction
  • Planning the Project / Web App
  • Planning the Data Requirements
  • Planning the Layout / Components
  • Registering Routes
  • Adding Route Page Components
  • Working on the Main Layout & Styling
  • Wiring Up Pages
  • Adding Vuex and Coach Data
  • Working on the Coaches List and List Items
  • Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
  • Building the Coach Detail Component
  • Filtering Coaches
  • Registering as a Coach: The Form
  • Adding Coaches to Vuex
  • Adding Form Validation
  • Working on the Contact Form
  • Storing Requests (Messages) With Vuex
  • Outputting Incoming Requests (Messages)
  • Filtering Requests for the Active Coach
  • Sending a PUT Http Request to Store Coach Data
  • Fetching Coach Data (GET Http Request)
  • Rendering a Loading Spinner
  • Adding Http Error Handling
  • Sending Coaching Requests Http Requests
  • Caching Http Response Data
  • Adding Route Transitions
  • The "Not Found" Page & Summary

Section 17 : Vue & Authentication

  • Module Introduction
  • How Authentication Works in Vue Apps (or any SPA)
  • Locking / Protecting Backend Resources
  • Adding an Authentication Page (Login & Signup)
  • Preparing Vuex
  • Adding a "Signup" Action & Flow
  • Better UX: Loading Spinner & Error Handling
  • Adding a "Login" Action & Flow
  • Attaching the Token to Outgoing Requests
  • Updating the UI Based on Auth State
  • Adding a "Logout" Action & Flow
  • Authentication & Routing (incl. Navigation Guards)
  • Adding "Auto Login"
  • Adding "Auto Logout"
  • Summary

Section 18 : Optimizing & Deploying Vue Apps

  • Module Introduction
  • What To Deploy?
  • Optimization: Using Asynchronous Components
  • Building the Project For Production
  • Deploying a Vue App

Section 19 : The Composition API-Replacing the Options API

  • Module Introduction
  • Which Problem Does The Composition API Solve?
  • Replacing "data" with "refs"
  • Building "reactive" Objects
  • Reactivity: A Deep Dive
  • Replacing "methods" with Regular Functions
  • Replacing "Computed Properties" with the "computed" Function
  • Two-Way-Binding and the Composition API
  • Working with Watchers
  • A First Summary
  • How To Use Template Refs
  • Components, Props & The Composition API
  • Emitting Custom Events
  • Working with Provide/ Inject
  • Lifecycle Hooks in the Composition API
  • Migrating from Options API to Composition API - An Example Project
  • Migrating a First Component
  • Migrating a Big Component
  • Migrating the Remaining Components
  • Routing, Params & The Composition API
  • The Route & Router Objects and the Composition API
  • Using Vuex with the Composition API
  • Summary

Section 20 : Reusing Functionality: Mixins & Custom Composition Functions

  • Module Introduction
  • Reusability Concepts
  • Using Mixins
  • Understanding Mixin Merging
  • Global Mixins
  • Disadvantages of Mixins
  • Custom Hooks / Composables & The Composition API
  • More Custom Composition Functions
  • Why Hooks / Composables Beat Mixins
  • Example: Creating a "Search" Hook
  • Custom Hooks Gotchas
  • More Thoughts on Custom Hooks / Composables
  • Example: A Custom "Sort" Hook

Section 21: Vue 2 to Vue 3 Migration

  • Vue 3 - Overview
  • Important Changes & Migration Steps
  • Vue 3: New Features
  • The New Composition API (Optional!)
  • About this Course & Vue 3

Section 22 : Getting Started [VUE2]

  • Course Introduction
  • Let s Create our First VueJS Application
  • Extending the VueJS Application
  • Course Structure
  • Take Advantage of all Course Resources!
  • Setup VueJS Locally

Section 23 : Using VueJs to Interact with the DOM [VUE2]

  • Module Introduction
  • Understanding VueJS Templates
  • How the VueJS Template Syntax and Instance Work Together
  • Accessing Data in the Vue Instance
  • Binding to Attributes
  • Understanding and Using Directives
  • Disable Re-Rendering with v-once
  • How to Output Raw HTML
  • Listening to Events
  • Getting Event Data from the Event Object
  • Passing your own Arguments with Events
  • Modifying an Event - with Event Modifiers
  • Listening to Keyboard Events
  • Writing JavaScript Code in the Templates
  • Using Two-Way-Binding
  • Reacting to Changes with Computed Properties
  • An Alternative to Computed Properties: Watching for Changes
  • Saving Time with Shorthands
  • Dynamic Styling with CSS Classes - Basics
  • Dynamic Styling with CSS Classes - Using Objects
  • Dynamic Styling with CSS Classes - Using Names
  • Setting Styles Dynamically (without CSS Classes)
  • Styling Elements with the Array Syntax
  • Module Wrap Up

Section 24 : Using Conditionals and Rendering Lists [VUE2]

  • Module Introduction
  • Conditional Rendering with v-if
  • Using an Alternative v-if Syntax
  • Don t Detach it with v-show
  • Rendering Lists with v-for
  • Getting the Current Index
  • Using an Alternative v-for Syntax
  • Looping through Objects
  • Looping through a List of Numbers
  • Keeping Track of Elements when using v-for
  • Module Wrap Up

Section 25 : First Course Project - The Monster Slayer [VUE2]

  • Introduction & Challenge
  • Setting up the Course Project
  • Creating the Vue Instance and Styling the Healthbars
  • Showing the Player Controls Conditionally
  • Implementing a Start Game Method
  • Implementing a Attack Method
  • Write better Code - Time for Refactoring!
  • Implementing a Special Attack
  • Implementing a Heal Method
  • Finishing the Action Buttons
  • Creating an Action Log
  • Printing the Log (v-for)
  • Finishing the Log
  • Styling the Log Conditionally
  • Wrap Up

Section 26 : Understanding the Vue]S Instance [VUE2]

  • Module Introduction
  • Some Basics about the VueJS Instance
  • Using Multiple Vue Instances
  • Accessing the Vue Instance from Outside
  • How VueJS manages your Data and Methods
  • A Closer Look at $el and $data
  • Placing $refs and Using them on your Templates
  • Where to learn more about the Vue API
  • Mounting a Template
  • Using Components
  • Limitations of some Templates
  • How VueJS Updates the DOM
  • The VueJS Instance Lifecycle
  • The VueJS Instance Lifecycle in Practice
  • Module Wrap Up

Section 27 : Moving to a Real Development Workflow with Webpack and Vue CLI [VUE2]

  • Module Introduction
  • Why do we need a Development Server?
  • What does Development Workflow mean?
  • Using the Vue CLI to create Projects
  • Installing the Vue CLI and Creating a new Project
  • An Overview over the Webpack Template Folder Structure
  • Understanding .vue Files
  • Understanding the Object in the Vue File
  • How to Build your App for Production
  • Module Wrap Up

Section 28 : An Introduction to Components [VUE2]

  • Module Introduction
  • An Introduction to Components
  • Storing Data in Components with the Data Method
  • Registering Components Locally and Globally
  • The Root Component in the App.vue File
  • Creating a Component
  • Using Components
  • Moving to a Better Folder Structure
  • How to Name your Component Tags (Selectors)
  • Scoping Component Styles
  • Module Wrap Up

Section 29 : Communicating between Components [VUE2]

  • Module Introduction
  • Communication Problems
  • Using Props for Parent => Child Communication
  • Naming props
  • Using props in the Child Component
  • Validating props
  • Using Custom Events for Child => Parent Communication
  • Understanding Unidirectional Data Flow
  • Communicating with Callback Functions
  • Communication between Sibling Components
  • Using an Event Bus for Communication
  • Centralizing Code in an Event Bus
  • Wrap Up

Section 30 : Course Roundup

  • Course Roundup

Section 31 : Advanced Component Usage [VUE2]

  • Module Introduction
  • Setting up the Module Project
  • Passing Content - The Suboptimal Solution
  • Passing Content with Slots
  • How Slot Content gets Compiled and Styled
  • Using Multiple Slots (Named Slots)
  • Default Slots and Slot Defaults
  • A Summary on Slots
  • Switching Multiple Components with Dynamic Components
  • Understanding Dynamic Component Behavior
  • Keeping Dynamic Components Alive
  • Dynamic Component Lifecycle Hooks
  • Wrap Up

Section 32 : Second Course Project - Wonderful Quotes [VUE2]

  • Module Introduction
  • Setting up the Project
  • Initializing the Application
  • Creating the Application Components
  • Passing Data with Props and Slots
  • Allowing Users to Create Quotes with a NewQuote Component
  • Adding Quotes with Custom Events
  • Adding a Info Box
  • Allowing for Quote Deletion
  • Controlling Quotes with a Progress Bar
  • Finishing Touches and State Management

Section 33 : All Course Exercises ( Time to Practice )

  • Time to Practice (1) - Outputting Data to Templates (Problem)
  • Time to Practice (1) - Outputting Data to Templates (Solution)
  • Time to Practice (2) - Events (Problem)
  • Time to Practice (2) - Events (Solution)
  • Time to Practice (3) - Reactive Properties (Problem)
  • Time to Practice (3) - Reactive Properties (Solution)
  • Time to Practice (4) - Styling (Problem)
  • Time to Practice (4) - Styling (Solution)
  • Time to Practice (5) - Conditionals and Lists (Problem)
  • Time to Practice (5) - Conditionals and Lists (Solution)
  • Time to Practice (6) - Components (Problem)
  • Time to Practice (6) - Components (Solution)
  • Time to Practice (7) - Component Communication (Problem)
  • Time to Practice (7) - Component Communication (Solution)
  • Time to Practice (8) - Slots and Dynamic Components (Problem)
  • Time to Practice (8) - Slots and Dynamic Components (Solution)
  • Time to Practice (9) - Forms (Problem)
  • Time to Practice (9) - Forms (Solution)
  • Time to Practice (10) - Directives (Problem)
  • Time to Practice (10) - Directives (Solution)
  • Time to Practice (11) - Filters and Mixins (Problem)
  • Time to Practice (11) - Filters and Mixins (Solution)

Section 34: Handling User Input with Forms [VUE2]

  • Module Introduction
  • A Basic input Form Binding
  • Grouping Data and Pre-Populating Inputs
  • Modifying User Input with Input Modifiers
  • Binding textareaand Saving Line Breaks
  • Using Checkboxes and Saving Data in Arrays
  • Using Radio Buttons
  • Handling Dropdowns with select and option
  • What v-model does and How to Create a Custom Control
  • Creating a Custom Control (Input)
  • Submitting a Form
  • Wrap Up

Section 35 : Bonus: Authentication in Vue Apps

  • About this Section
  • Module Introduction
  • How Authentication Works in SPAs
  • Project Setup
  • Adding User Signup
  • Adding User Signin (Login)
  • Using Vuex to send Auth Requests
  • Storing Auth Data in Vuex
  • Accessing other Resources from Vuex
  • Sending the Token to the Backend
  • Protecting Routes (Auth Guard)
  • Updating the UI State (based on Authentication State)
  • Adding User Logout
  • Adding Auto Logout
  • Adding Auto Login
  • Wrap Up

Section 36 : Using and Creating Directives [VUE2]

  • Module Introduction
  • Understanding Directives
  • How Directives Work - Hook Functions
  • Creating a Simple Directive
  • Passing Values to Custom Directives
  • Passing Arguments to Custom Directives
  • Modifying a Custom Directive with Modifiers
  • Custom Directives - A Summary
  • Registering Directives Locally
  • Using Multiple Modifiers
  • Passing more Complex Values to Directives
  • Wrap Up

Section 37 : Bonus: Form Input Validation

  • About this Section
  • Module Introduction
  • Installing Vuelidate
  • Adding a Validator
  • Adding Validation UI Feedback
  • Controlling Styles for Invalid Entries
  • More Validators
  • Validating Passwords For Equality
  • Using the Required-Unless Validator
  • Validating Arrays
  • Controlling the Form Submit Button
  • Creating Custom Validators
  • Async Validators
  • Wrap Up

Section 38 : Improving your App with Filters and Mixins [VUE2]

  • Module Introduction
  • Creating a Local Filter
  • Global Filters and How to Chain Multiple Filters
  • An (often-times better) Alternative to Filters: Computed Properties
  • Understanding Mixins
  • Creating and Using Mixins
  • How Mixins get Merged
  • Creating a Global Mixin (Special Case!)
  • Mixins and Scope
  • Wrap Up

Section 39 : Adding Animations and Transitions [VUE2]

  • Module Introduction
  • Understanding Transitions
  • Preparing Code to use Transitions
  • Setting Up a Transition
  • Assigning CSS Classes for Transitions
  • Creating a Fade Transition with the CSS Transition Property
  • Creating a Slide Transition with the CSS Animation Property
  • Mixing Transition and Animation Properties
  • Animating v-if and v-show
  • Setting Up an Initial (on-load) Animation
  • Using Different CSS Class Names
  • Using Dynamic Names and Attributes
  • Transitioning between Multiple Elements (Theory)
  • Transitioning between Multiple Elements (Practice)
  • Listening to Transition Event Hooks
  • Understanding JavaScript Animations
  • Excluding CSS from your Animation
  • Creating an Animation in JavaScript
  • Animating Dynamic Components
  • Animating Lists with
  • Using - Preparations
  • Using to Animate a List
  • Understanding the App
  • Creating the App
  • Adding Animations
  • Wrap Up

Section 40 : Connecting to Servers via Http - Using vue-resource [VUE2]

  • Module Introduction
  • Accessing Http via vue-resource - Setup
  • Creating an Application and Setting Up a Server (Firebase)
  • POSTing Data to a Server (Sending a POST Request)
  • GETting and Transforming Data (Sending a GET Request)
  • Configuring vue-resource Globally
  • Intercepting Requests
  • Intercepting Responses
  • Where the resource in vue-resource Comes From
  • Creating Custom Resources
  • Resources vs Normal Http Requests
  • Understanding Template URLs
  • Wrap Up

Section 41 : Routing in a VueJS Application [VUE2]

  • Module Introduction
  • Setting up the VueJS Router (vue-router)
  • Setting Up and Loading Routes
  • Understanding Routing Modes (Hash vs History)
  • Navigating with Router Links
  • Where am I? - Styling Active Links
  • Navigating from Code (Imperative Navigation)
  • Setting Up Route Parameters
  • Fetching and Using Route Parameters
  • Reacting to Changes in Route Parameters
  • Setting Up Child Routes (Nested Routes)
  • Navigating to Nested Routes
  • Making Router Links more Dynamic
  • A Better Way of Creating Links - With Named Routes
  • Using Query Parameters
  • Multiple Router Views (Named Router Views)
  • Redirecting
  • Setting Up Catch All Routes / Wildcards
  • Animating Route Transitions
  • Passing the Hash Fragment
  • Controlling the Scroll Behavior
  • Protecting Routes with Guards
  • Using the beforeEnter Guard
  • Using the beforeLeave Guard
  • Loading Routes Lazily
  • Wrap Up

Section 42 : Better State Management with Vuex [VUE2]

  • Module Introduction
  • Why a Different State Management May Be Needed
  • Understanding Centralized State
  • Using the Centralized State
  • Why a Centralized State Alone Won't Fix It
  • Understanding Getters
  • Using Getters
  • Mapping Getters to Properties
  • Understanding Mutations
  • Using Mutations
  • Why Mutations have to run Synchronously
  • How Actions improve Mutations
  • Using Actions
  • Mapping Actions to Methods
  • A Summary of Vuex
  • Two-Way-Binding (v-model) and Vuex
  • Improving Folder Structures
  • Modularizing the State Management
  • Using Separate Files
  • Using Namespaces to Avoid Naming Problems
  • Wrap Up

Section 43 : Final Project - The Stock Trader [VUE2]

  • Project Introduction
  • Project Setup and Planning
  • Creating the First Components
  • Setup Project Routes
  • Adding a Header and Navigation
  • Planning the Next Steps
  • Creating Stocks Components
  • Adding a Buy Button
  • Setting up the Vuex State Management
  • Adding a Portfolio Module to Vuex
  • Working on the Portfolio Stocks
  • Connecting the Portfolio with Vuex
  • Time to fix some Errors
  • Displaying the Funds
  • Adding some Order Checks
  • Making Funds Look Nicer with Filters
  • Ending the Day - Randomizing Stocks
  • Animating the Route Transitions
  • Saving & Fetching Data - Adding a Dropdown
  • Setting up vue-resource and Firebase
  • Saving Data (PUT Request)
  • Fetching Data (GET Request)
  • Testing and Bug Fixes
  • Project Wrap Up
  • Bonus: Debugging Vuex with Vue Developer Tools

Section 44 : Deploying a Vues Application [VUE2]

  • Module Introduction
  • Preparing for Deployment
  • Deploying the App (Example: AWS S3)

Section 45 : Bonus: Using Axios instead of vue-resource [VUE2]

  • About this Section
  • Module Introduction
  • Project Setup
  • Axios Setup
  • Sending a POST Request
  • Sending a GET Request
  • Accessing & Using Response Data
  • Setting a Global Request Configuration
  • Using Interceptors
  • Custom Axios Instances
  • Wrap Up

Section 46 : Bonus: Vue CLI3

  • Module Introduction
  • Creating a Project
  • Analyzing the Created Project
  • Using Plugins
  • CSS Pre-Processors
  • Environment Variables
  • Building the Project
  • Instant Prototyping
  • Different Build Targets
  • Using the "Old" CLI Templates (vue init)
  • Using the Graphical User Interface (GUI)

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Download the Careers360 App on your Android phone

Regular exam updates, QnA, Predictors, College Applications & E-books now on your Mobile

Careers360 App
150M+ Students
30,000+ Colleges
500+ Exams
1500+ E-books