Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API)

Video description

Vue.js is a highly popular framework that provides a reactive and great user experience not only for mobile apps but also for browser applications. Hence, it is the highest-paid one in the front-end development industry.

This course starts with an introduction to Vue.js and explains why it is a great JavaScript framework. Then you will learn the basic syntaxes and templates of Vue.js and see how to output reactive data and handle keyboard events. Moving along, you will learn how to interact with Document Object Model (DOM) and set up a development environment and workflow with the Vue CLI. Then we will walk through the various components and show you how to work with forms and HTTP requests.

Next, you will learn how to make your app appealing with animations and transitions and understand the importance of routing and Vuex in Vue.js. Finally, we will create a stock trader application and learn the stages in deploying a Vue.js application. You will also learn how to use Axios instead of Vue resources and underline the concepts of authentication in Vue apps.

By the end of this course, you will have developed the essential Vue.js skills needed for frontend web development and to develop reactive browser applications.

What You Will Learn

  • Understand what Vue.js is and its applications
  • Set up developer environment and workflow with the CLI
  • Create a learning resource app to understand components, forms, and styling
  • Build a single-page application to understand routing
  • Find out how to implement animations and transitions in Vue apps
  • Improve state management using Vuex

Audience

If you are a software engineer or web developer interested in frontend development or want to build reactive browser applications using Vue.js, this course is for you. Basic knowledge of JavaScript, HTML, and CSS is necessary to get started with this course.

About The Author

Maximilian Schwarzmüller: Maximilian Schwarzmüller: A professional web developer and instructor, he has never stopped learning new programming skills and languages since the age of 13. In his early days, he started creating websites simply for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. Although he started web development on the backend (PHP with Laravel and NodeJS), he has progressed to becoming a front-end developer using modern frameworks such as React, Angular, and VueJS 2 in many projects.

The most rewarding experience for him is to see how people find new and better jobs, build exciting web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Table of contents

  1. Chapter 1 : Getting Started
    1. Welcome to the Course!
    2. What is Vue.js?
    3. Different Ways of Using Vue
    4. Exploring Vue Alternatives
    5. Building Your First App with JavaScript
    6. Re-Building the App with Vue.js
    7. Vue Versus Vanilla JavaScript (Just JavaScript)
    8. Setting Up the Course Development Environment
    9. Course Outline and Contents
    10. How to Get the Most Out of This Course
  2. Chapter 2 : Basics and Core Concepts – Document Object Model (DOM) Interaction with Vue
    1. Module Introduction
    2. Creating and Connecting Vue App Instances
    3. Interpolation and Data Binding
    4. Binding Attributes with the “V-Bind” Directive
    5. Understanding “Methods” in Vue Apps
    6. Working with Data Inside a Vue App
    7. Outputting Raw HTML Content with V-html
    8. First Summary
    9. Understanding Event Binding
    10. Events and Methods
    11. Working with Events and Arguments
    12. Using the Native Event Object
    13. Exploring Event Modifiers
    14. Locking Content with V-Once
    15. Data Binding + Event Binding = Two-Way Binding
    16. Methods Used for Data Binding: How it Works?
    17. Introducing Computed Properties
    18. Working with Watchers
    19. Methods Versus Computed Properties Versus Watchers
    20. V-Bind and V-On Shorthands
    21. Dynamic Styling with Inline Styles
    22. Adding CSS Classes Dynamically
    23. Classes and Computed Properties
    24. Dynamic Classes: Array Syntax
    25. Module Summary
  3. Chapter 3 : Rendering Conditional Content and Lists
    1. Module Introduction
    2. Understanding the Problem
    3. Rendering Content Conditionally
    4. V-if, V-else, and V-else-if
    5. Using V-show Instead of V-if
    6. Rendering Lists of Data
    7. Diving Deeper into v-For
    8. Removing List Items
    9. Listening to Events
    10. Module Summary
  4. Chapter 4 : Course Project: The Monster Slayer Game
    1. Module Introduction
    2. Project Setup and First Methods
    3. Updating the Healthbars
    4. Adding a “Special Attack”
    5. Adding a “Heal” Functionality
    6. Adding a “Game Over” Screen
    7. Finishing the Core Functionality
    8. Adding a Battle Log
  5. Chapter 5 : Vue: Behind the Scenes
    1. Module Introduction
    2. An Introduction to Vue's Reactivity
    3. Vue Reactivity: A Deep Dive
    4. One App Versus Multiple Apps
    5. Understanding Templates
    6. Working with Refs
    7. How Vue Updates the Document Object Model (DOM)
    8. Vue App Lifecycle – Theory
    9. Vue App Lifecycle – Practice
  6. Chapter 6 : Introducing Components
    1. Module Introduction
    2. Understanding the Problem
    3. Introducing Components
    4. Building Complex User Interfaces with Components
  7. Chapter 7 : Moving to a Better Development Setup and Workflow with the Vue CLI
    1. Module Introduction
    2. Why You Need a Development Server?
    3. Why You Want a Better Developer Experience?
    4. Installing and Using the Vue CLI
    5. Inspecting the Created Project
    6. Inspecting the Vue Code and “.vue” Files
    7. Adding the “Vetur” Extension to Visual Studio Code
    8. More on “.vue” Files
    9. A New Vue Project
    10. Creating a Basic Vue App
    11. Adding a Component
    12. Adding Styling
  8. Chapter 8 : Component Communication
    1. Module Introduction
    2. Introducing “Props” (Parent => Child Communication)
    3. Prop Behavior and Changing Props
    4. Validating Props
    5. Working with Dynamic Prop Values
    6. Emitting Custom Events (Child => Parent Communication)
    7. Defining and Validating Custom Events
    8. Demo: Adding Components and Connecting Them
    9. Demo: Adding More Component Communication
    10. A Potential Problem
    11. Provide + Inject to the Rescue
    12. Provide + Inject for Functions/Methods
    13. Provide + Inject Versus Props and Custom Events
    14. Module Summary
  9. Chapter 9 : Diving Deeper into Components
    1. Module Introduction
    2. Project Setup
    3. Global Versus Local Components
    4. Scoped Styles
    5. Introducing Slots
    6. Named Slots
    7. Slot Styles and Compilation
    8. More on Slots
    9. Scoped Slots
    10. Dynamic Components
    11. Keeping Dynamic Components Alive
    12. Applying What You Know + a Problem
    13. Teleporting Elements
    14. Working with Fragments
    15. The Vue Style Guide
    16. Moving to a Different Folder Structure
    17. Module Summary
  10. Chapter 10 : Course Project: The Learning Resources App
    1. Module Introduction
    2. Setup and First Steps
    3. First Component and Prop
    4. Styling and More Components
    5. Header and BaseCard Components
    6. Adding a Base Button
    7. Dynamic Components and the Fallthrough Attribute
    8. Adding and Styling Tabs
    9. Adding a Form
    10. Fetching User Input
    11. Adding a Modal Dialog
    12. Deleting Items
    13. Adding “Teleport”
  11. Chapter 11 : Forms
    1. Module Introduction
    2. V-Model and Inputs
    3. Working with V-Model Modifiers and Numbers
    4. V-Model and Dropdowns
    5. Using V-Model with Checkboxes and Radio Buttons
    6. Adding Basic Form Validation
    7. Building a Custom Control Component
    8. Using V-Model on Custom Components
    9. Module Summary
  12. Chapter 12 : Sending HTTP Requests
    1. Module Introduction
    2. Starting App and Why You Need a Backend
    3. Adding a Backend
    4. How to (Not) Send HTTP Requests
    5. Sending a POST Request to Store Data
    6. Getting Data (GET Request) and Transforming Response Data
    7. Loading Data When a Component Mounts
    8. Showing a “Loading…” Message
    9. Handling the “No Data” State
    10. Handling Technical/Browser-Side Errors
    11. Handling Error Responses
    12. Module Summary
  13. Chapter 13 : Routing: Building “Multi-Page” Single Page Applications
    1. Module Introduction
    2. Routing: What and Why?
    3. Routing Setup
    4. Registering and Rendering Routes
    5. Navigating with Router-link
    6. Styling Active Links
    7. Programmatic Navigation
    8. Passing Data with Route Params (Dynamic Segments)
    9. Navigation and Dynamic Paths
    10. Updating Params Data with Watchers
    11. Passing Params as Props
    12. Redirecting and “Catch All” Routes
    13. Using Nested Routes
    14. More Fun with Named Routes and Location Objects
    15. Using Query Params
    16. Rendering Multiple Routes with Named Router Views
    17. Controlling Scroll Behavior
    18. Introducing Navigation Guards
    19. Diving Deeper into Navigation Guards
    20. The Global “afterEach” Guard
    21. Beyond Entering: Route Leave Guards
    22. Utilizing Route Metadata
    23. Organizing Route Files
    24. Summary
  14. Chapter 14 : Animations and Transitions
    1. Module Introduction
    2. Animation Basics and CSS Transitions
    3. Understanding CSS Animations
    4. Why Is “Just CSS” Not Enough?
    5. Playing CSS Animations with Vue's Help
    6. Using the Transition Component
    7. CSS Animations with the Transition Component
    8. Using Custom CSS Class Names
    9. Example: Animating a Modal
    10. Transitioning Between Multiple Elements
    11. Using Transition Events
    12. Building JavaScript Transitions (Instead of CSS)
    13. Disabling CSS Transitions
    14. Getting Started with Animated Lists
    15. Animating Lists with “Transition-Group”
    16. Animating List Item Movement
    17. Animating Route Changes
  15. Chapter 15 : Vuex
    1. Module Introduction
    2. Vuex: What and Why?
    3. Creating and Using a Store
    4. Connecting Components to State
    5. Introducing Mutations - A Better Way of Changing Data
    6. Passing Data to Mutations with Payloads
    7. Introducing Getters - A Better Way of Getting Data
    8. Running Async Code with Actions
    9. Understanding the Action “Context”
    10. Using Mapper Helpers
    11. Example: Adding More States
    12. Organizing Your Store with Modules
    13. Understanding Local Module State
    14. Namespacing Modules
    15. Structuring Vuex Code and Files
    16. A Challenge!
    17. Challenge Solution – Part 1
    18. Challenge Solution – Part 2
    19. Challenge Solution – Part 3
    20. Summary
  16. Chapter 16 : Main Project: “Find a Coach” Web App
    1. Module Introduction
    2. Planning the Project/Web App
    3. Planning the Data Requirements
    4. Planning the Layout/Components
    5. Registering Routes
    6. Adding Route Page Components
    7. Working on the Main Layout and Styling
    8. Wiring Up Pages
    9. Adding Vuex and Coach Data
    10. Working on the Coaches List and List Items
    11. Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
    12. Building the Coach Detail Component
    13. Filtering Coaches
    14. Registering as a Coach: The Form
    15. Adding Coaches to Vuex
    16. Adding Form Validation
    17. Working on the Contact Form
    18. Storing Requests (Messages) with Vuex
    19. Outputting Incoming Requests (Messages)
    20. Filtering Requests for the Active Coach
    21. Sending a PUT HTTP Request to Store Coach Data
    22. Fetching Coach Data (GET HTTP Request)
    23. Rendering a Loading Spinner
    24. Adding HTTP Error Handling
    25. Sending Coaching Requests Using HTTP Requests
    26. Caching HTTP Response Data
    27. Adding Route Transitions
    28. The “Not Found” Page and Summary
  17. Chapter 17 : Vue and Authentication
    1. Module Introduction
    2. How Authentication Works in Vue Apps [or Any Single-Page Application (SPA)]?
    3. Locking/Protecting Backend Resources
    4. Adding an Authentication Page (Login and Signup)
    5. Preparing Vuex
    6. Adding a “Signup” Action and Flow
    7. Better UX: Loading Spinner and Error Handling
    8. Adding a “Login” Action and Flow
    9. Attaching the Token to Outgoing Requests
    10. Updating the UI Based on Auth State
    11. Adding a “Logout” Action and Flow
    12. Authentication and Routing (Including Navigation Guards)
    13. Adding “Auto Login”
    14. Adding “Auto Logout”
    15. Summary
  18. Chapter 18 : Optimizing and Deploying Vue Apps
    1. Module Introduction
    2. What to Deploy?
    3. Optimization: Using Asynchronous Components
    4. Building the Project for Production
    5. Deploying a Vue App
  19. Chapter 19 : The Composition API – Replacing the Options API
    1. Module Introduction
    2. Which Problem Does the Composition API Solve?
    3. Replacing “Data” with “Refs”
    4. Building “Reactive” Objects
    5. Reactivity: A Deep Dive
    6. Replacing “Methods” with Regular Functions
    7. Replacing “Computed Properties” with the “Computed” Function
    8. Two-Way Binding and the Composition API
    9. Working with Watchers
    10. A First Summary
    11. How to Use Template Refs
    12. Components, Props, and the Composition API
    13. Emitting Custom Events
    14. Working with Provide/Inject
    15. Lifecycle Hooks in the Composition API
    16. Migrating from Options API to Composition API - An Example Project
    17. Migrating a First Component
    18. Migrating a Big Component
    19. Migrating the Remaining Components
    20. Routing, Params, and the Composition API
    21. Route and Router Objects and the Composition API
    22. Using Vuex with the Composition API
    23. Summary
  20. Chapter 20 : Reusing Functionality: Mixins and Custom Composition Functions
    1. Module Introduction
    2. Reusability Concepts
    3. Using Mixins
    4. Merging Mixins
    5. Global Mixins
    6. Disadvantages of Mixins
    7. Custom Hooks/Composable and the Composition API
    8. More Custom Composition Functions
    9. Why Hooks/Composable Beat Mixins?
    10. Example: Creating a “Search” Hook
    11. Custom Hooks Gotchas
    12. More Thoughts on Custom Hooks/Composable
    13. Example: A Custom “Sort” Hook
  21. Chapter 21 : Roundup and Next Steps
    1. Course Roundup and Next Steps
  22. Chapter 22 : Vue 2 to Vue 3 Migration
    1. Vue 3 - Overview
    2. Important Changes and Migration Steps
    3. Vue 3: New Features
    4. The New Composition API (Optional)
    5. About This Course and Vue 3
  23. Chapter 23 : Getting Started [VUE2]
    1. Course Introduction
    2. Creating Your First Vue.js Application
    3. Extending the Vue.js Application
    4. Course Structure
    5. Take Advantage of All Course Resources!
    6. Set Up Vue.js Locally
  24. Chapter 24 : Using Vue.js to Interact with the Document Object Model (DOM) [VUE2]
    1. Module Introduction
    2. Understanding Vue.js Templates
    3. How the Vue.js Template Syntax and Instance Work Together
    4. Accessing Data in the Vue Instance
    5. Binding Attributes
    6. Understanding and Using Directives
    7. Disable Re-Rendering with V-Once
    8. How to Output Raw HTML?
    9. Listening to Events
    10. Getting Event Data from the Event Object
    11. Passing Your Own Arguments with Events
    12. Modifying an Event - with Event Modifiers
    13. Listening to Keyboard Events
    14. Writing JavaScript Code in the Templates
    15. Using Two-Way Binding
    16. Writing JavaScript Code in the Templates
    17. Reacting to Changes with Computed Properties
    18. An Alternative to Computed Properties: Watching for Changes
    19. Saving Time with Shorthands
    20. Dynamic Styling with CSS Classes – Basics
    21. Dynamic Styling with CSS Classes - Using Objects
    22. Dynamic Styling with CSS Classes - Using Names Setting Styles Dynamically (without CSS Classes)
    23. Styling Elements with the Array Syntax
    24. Module Wrap Up
  25. Chapter 25 : Using Conditionals and Rendering Lists [VUE2]
    1. Module Introduction
    2. Conditional Rendering with V-If
    3. Using an Alternative V-If Syntax
    4. Don't Detach it with V-Show
    5. Rendering Lists with V-For
    6. Getting the Current Index
    7. Using an Alternative V-For Syntax
    8. Looping through Objects
    9. Looping through a List of Numbers
    10. Keeping Track of Elements While Using V-For
    11. Module Wrap Up
  26. Chapter 26 : First Course Project - The Monster Slayer [VUE2]
    1. Introduction and Challenge
    2. Setting Up the Course Project
    3. Creating the Vue Instance and Styling the Healthbars
    4. Showing the Player Controls Conditionally
    5. Implementing a “Start Game” Method
    6. Implementing an “Attack” Method
    7. Write better Code - Time for Refactoring!
    8. Implementing a “Special Attack”
    9. Implementing a “Heal” Method
    10. Finishing the Action Buttons
    11. Creating an Action Log
    12. Printing the Log (v-for)
    13. Finishing the Log
    14. Styling the Log Conditionally
    15. Wrap Up
  27. Chapter 27 : Understanding the Vue.js Instance [VUE2]
    1. Module Introduction
    2. Some Basics about the Vue.js Instance
    3. Using Multiple Vue Instances
    4. Accessing the Vue Instance from Outside
    5. How Vue.js Manages Your Data and Methods
    6. A Closer Look at $el and $data
    7. Placing $refs and Using Them on Your Templates
    8. Where to Learn More about the Vue API?
    9. Mounting a Template
    10. Using Components
    11. Limitations of Some Templates
    12. How Vue.js Updates the Document Object Model (DOM)?
    13. The Vue.js Instance Lifecycle
    14. The Vue.js Instance Lifecycle in Practice
    15. Module Wrap Up
  28. Chapter 28 : Moving to a “Real” Development Workflow with Webpack and Vue CLI [VUE2]
    1. Module Introduction
    2. Why Do You Need a Development Server?
    3. What Does “Development Workflow” Mean?
    4. Using the Vue CLI to Create Projects
    5. Installing the Vue CLI and Creating a New Project
    6. Overview of the Webpack Template Folder Structure
    7. Understanding the “.vue” Files
    8. Understanding the Object in the Vue File
    9. How to Build Your App for Production
    10. Module Wrap Up
  29. Chapter 29 : An Introduction to Components [VUE2]
    1. Module Introduction
    2. An Introduction to Components
    3. Storing Data in Components with the Data Method
    4. Registering Components Locally and Globally
    5. “Root Component” in the App.vue File
    6. Creating a Component
    7. Using Components
    8. Moving to a Better Folder Structure
    9. How to Name Your Component Tags (Selectors)
    10. Scoping Component Styles
    11. Module Wrap Up
  30. Chapter 30 : Communicating Between Components [VUE2]
    1. Module Introduction
    2. Communication Problems
    3. Using Props for Parent => Child Communication
    4. Naming “props”
    5. Using “Props” in the Child Component
    6. Validating “Props”
    7. Using Custom Events for Child => Parent Communication
    8. Understanding Unidirectional Data Flow
    9. Communicating with Callback Functions
    10. Communication between Sibling Components
    11. Using an Event Bus for Communication
    12. Centralizing Code in an Event Bus
    13. Wrap Up
  31. Chapter 31 : Advanced Component Usage [VUE2]
    1. Module Introduction
    2. Setting Up the Module Project
    3. Passing Content - The Suboptimal Solution
    4. Passing Content with Slots
    5. How Slot Content Gets Compiled and Styled?
    6. Using Multiple Slots (Named Slots)
    7. Default Slots
    8. A Summary on Slots
    9. Switching Multiple Components with Dynamic Components
    10. Understanding Dynamic Component Behavior
    11. Keeping Dynamic Components Alive
    12. Dynamic Component Lifecycle Hooks
    13. Wrap Up
  32. Chapter 32 : Second Course Project - Wonderful Quotes [VUE2]
    1. Module Introduction
    2. Setting Up the Project
    3. Initializing the Application
    4. Creating the Application Components
    5. Passing Data with Props and Slots
    6. Allowing Users to Create Quotes with a NewQuote Component
    7. Adding Quotes with Custom Events
    8. Adding an Info Box
    9. Allowing for Quote Deletion
    10. Controlling Quotes with a Progress Bar
    11. Finishing Touches and State Management
  33. Chapter 33 : Handling User Input with Forms [VUE2]
    1. Module Introduction
    2. A Basic Form Binding
      1. Grouping Data and Pre-Populating Inputs
      2. Modifying User Input with Input Modifiers
      3. Binding and Handling User Input
        1. Using Checkboxes and Saving Data in Arrays
        2. Using Radio Buttons
        3. Handling Dropdowns with and
          1. Chapter 34 : Using and Creating Directives [VUE2]
            1. Module Introduction
            2. Understanding Directives
            3. How Directives Work? Hook Functions
            4. Creating a Simple Directive
            5. Passing Values to Custom Directives
            6. Passing Arguments to Custom Directives
            7. Modifying a Custom Directive with Modifiers
            8. Custom Directives - A Summary
            9. Registering Directives Locally
            10. Using Multiple Modifiers
            11. Passing More Complex Values to Directives
            12. Wrap Up
          2. Chapter 35 : Improving your App with Filters and Mixins [VUE2]
            1. Module Introduction
            2. Creating a Local Filter
            3. What are Global Filters and How to Chain Multiple Filters?
            4. An (Often Better) Alternative to Filters: Computed Properties
            5. Understanding Mixins
            6. Creating and Using Mixins
            7. How Mixins Get Merged
            8. Creating a Global Mixin (Special Case!)
            9. Mixins and Scope
            10. Wrap Up
          3. Chapter 36 : Adding Animations and Transitions [VUE2]
            1. Module Introduction
            2. Understanding Transitions
            3. Preparing a Code to Use Transitions
            4. Setting Up a Transition
            5. Assigning CSS Classes for Transitions
            6. Creating a “Fade” Transition with the CSS Transition Property
            7. Creating a “Slide” Transition with the CSS Animation Property
            8. Mixing Transition and Animation Properties
            9. Animating V-If and V-Show
            10. Setting Up an Initial (On-Load) Animation
            11. Using Different CSS Class Names
            12. Using Dynamic Names and Attributes
            13. Transitioning between Multiple Elements (Theory)
            14. Transitioning between Multiple Elements (Practice)
            15. Listening to Transition Event Hooks
            16. Understanding JavaScript Animations
            17. Excluding CSS from your Animation
            18. Creating an Animation in JavaScript
            19. Animating Dynamic Components
            20. Animating Lists with
              1. Using - Preparations
                1. Using to Animate a List
                  1. Understanding the App
                  2. Creating the App
                  3. Adding Animations
                  4. Wrap Up
                2. Chapter 37 : Connecting to Servers through HTTP - Using Vue-Resource [VUE2]
                  1. Module Introduction
                  2. Accessing HTTP through Vue-Resource – Setup
                  3. Creating an Application and Setting Up a Server (Firebase)
                  4. POST Data to a Server (Sending a POST Request)
                  5. Sending and Transforming Data (Sending a GET Request)
                  6. Configuring Vue-Resource Globally
                  7. Intercepting Requests
                  8. Intercepting Responses
                  9. Where the “Resource” in Vue-Resource Comes From
                  10. Creating Custom Resources
                  11. Resources Versus “Normal” HTTP Requests
                  12. Understanding Template URLs
                  13. Wrap Up
                3. Chapter 38 : Routing in a Vue.js Application [VUE2]
                  1. Module Introduction
                  2. Setting Up the Vue.js Router (Vue-router)
                  3. Setting Up and Loading Routes
                  4. Understanding Routing Modes (Hash Versus History)
                  5. Navigating with Router Links
                  6. Styling Active Links
                  7. Navigating from a Code (Imperative Navigation)
                  8. Setting Up Route Parameters
                  9. Fetching and Using Route Parameters
                  10. Reacting to Changes in Route Parameters
                  11. Setting Up Child Routes (Nested Routes)
                  12. Navigating to Nested Routes
                  13. Making Router Links More Dynamic
                  14. A Better Way of Creating Links - With Named Routes
                  15. Using Query Parameters
                  16. Multiple Router Views (Named Router Views)
                  17. Redirecting
                  18. Setting Up “Catch All” Routes/Wildcards
                  19. Animating Route Transitions
                  20. Passing the Hash Fragment
                  21. Controlling the Scroll Behavior
                  22. Protecting Routes with Guards
                  23. Using the “BeforeEnter” Guard
                  24. Using the “BeforeLeave” Guard
                  25. Loading Routes Lazily
                  26. Wrap Up
                4. Chapter 39 : Better State Management with Vuex [VUE2]
                  1. Module Introduction
                  2. Why a Different State Management may Be Needed
                  3. UUnderstanding “Centralized State”
                  4. Using the Centralized State
                  5. Why a Centralized State Alone Won't Fix it
                  6. Understanding Getters
                  7. Using Getters
                  8. Mapping Getters to Properties
                  9. Understanding Mutations
                  10. Using Mutations
                  11. Why Mutations Have to Run Synchronously
                  12. How Actions Improve Mutations
                  13. Using Actions
                  14. Mapping Actions to Methods
                  15. A Summary of Vuex
                  16. Two-Way Binding (v-model) and Vuex
                  17. Improving Folder Structures
                  18. Modularizing the State Management
                  19. Using Separate Files
                  20. Using Namespaces to Avoid Naming Problems
                  21. Wrap Up
                5. Chapter 40 : Final Project - The Stock Trader [VUE2]
                  1. Project Introduction
                  2. Project Setup and Planning
                  3. Creating the First Components
                  4. Set Up Project Routes
                  5. Adding a Header and Navigation
                  6. Planning the Next Steps
                  7. Creating Stocks Components
                  8. Adding a “Buy” Button
                  9. Setting Up the Vuex State Management
                  10. Adding a Portfolio Module to Vuex
                  11. Working on the Portfolio Stocks
                  12. Connecting the Portfolio with Vuex
                  13. Time to fix some Errors
                  14. Displaying the Funds
                  15. Adding Some Order Checks
                  16. Making Funds Look Nicer with Filters
                  17. Ending the Day - Randomizing Stocks
                  18. Animating the Route Transitions
                  19. Saving and Fetching Data - Adding a Dropdown
                  20. Setting Up Vue-Resource and Firebase
                  21. Saving Data (PUT Request)
                  22. Fetching Data (GET Request)
                  23. Testing and Bug Fixes
                  24. Project Wrap Up
                  25. Bonus: Debugging Vuex with Vue Developer Tools
                6. Chapter 41 : Deploying a Vue.js Application [VUE2]
                  1. Module Introduction
                  2. Preparing for Deployment
                  3. Deploying the App (Example: AWS S3)
                7. Chapter 42 : Bonus: Using Axios Instead of Vue-Resource [VUE2]
                  1. About This Section
                  2. Module Introduction
                  3. Project Setup
                  4. Axios Setup
                  5. Sending a POST Request
                  6. Sending a GET Request
                  7. Accessing and Using Response Data
                  8. Setting a Global Request Configuration
                  9. Using Interceptors
                  10. Custom Axios Instances
                  11. Wrap Up
                8. Chapter 43 : Bonus: Authentication in Vue Apps
                  1. Section Introduction
                  2. Module Introduction
                  3. How Authentication Works in Single-Page Applications (SPAs)
                  4. Project Setup
                  5. Adding User Sign-Up
                  6. Adding User Sign-In (Login)
                  7. Using Vuex to Send Auth Requests
                  8. Storing Auth Data in Vuex
                  9. Accessing Other Resources from Vuex
                  10. Sending the Token to the Backend
                  11. Protecting Routes (Auth Guard)
                  12. Updating the UI State (Based on Authentication State)
                  13. Adding User Logout
                  14. Adding Auto Logout
                  15. Adding Auto Login
                  16. Wrap Up

Product information

  • Title: Vue - The Complete Guide (Including Vue Router, Vuex, and Composition API)
  • Author(s): Academind by Maximilian Schwarzmüller
  • Release date: April 2018
  • Publisher(s): Packt Publishing
  • ISBN: 9781788992817