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

Table of Contents

Chapter 1 : Getting Started

Welcome to the Course!

What is Vue.js?

Different Ways of Using Vue

Exploring Vue Alternatives

Building Your First App with JavaScript

Re-Building the App with Vue.js

Vue Versus Vanilla JavaScript (Just JavaScript)

Setting Up the Course Development Environment

Course Outline and Contents

How to Get the Most Out of This Course

Chapter 2 : Basics and Core Concepts – Document Object Model (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 a Vue App

Outputting Raw HTML Content with V-html

First Summary

Understanding Event Binding

Events and Methods

Working with Events and 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?

Introducing Computed Properties

Working with Watchers

Methods Versus Computed Properties Versus Watchers

V-Bind and V-On Shorthands

Dynamic Styling with Inline Styles

Adding CSS Classes Dynamically

Classes and Computed Properties

Dynamic Classes: Array Syntax

Module Summary

Chapter 3 : Rendering Conditional Content and 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

Listening to Events

Module Summary

Chapter 4 : Course Project: The Monster Slayer Game

Module Introduction

Project Setup and First Methods

Updating the Healthbars

Adding a “Special Attack”

Adding a “Heal” Functionality

Adding a “Game Over” Screen

Finishing the Core Functionality

Adding a Battle Log

Chapter 5 : Vue: Behind the Scenes

Module Introduction

An Introduction to Vue’s Reactivity

Vue Reactivity: A Deep Dive

One App Versus Multiple Apps

Understanding Templates

Working with Refs

How Vue Updates the Document Object Model (DOM)

Vue App Lifecycle – Theory

Vue App Lifecycle – Practice

Chapter 6 : Introducing Components

Module Introduction

Understanding the Problem

Introducing Components

Building Complex User Interfaces with Components

Chapter 7 : Moving to a Better Development Setup and Workflow with the Vue CLI

Module Introduction

Why You Need a Development Server?

Why You Want a Better Developer Experience?

Installing and Using the Vue CLI

Inspecting the Created Project

Inspecting the Vue Code and “.vue” Files

Adding the “Vetur” Extension to Visual Studio Code

More on “.vue” Files

A New Vue Project

Creating a Basic Vue App

Adding a Component

Adding Styling

Chapter 8 : Component Communication

Module Introduction

Introducing “Props” (Parent => Child Communication)

Prop Behavior and Changing Props

Validating Props

Working with Dynamic Prop Values

Emitting Custom Events (Child => Parent Communication)

Defining and Validating Custom Events

Demo: Adding Components and Connecting Them

Demo: Adding More Component Communication

A Potential Problem

Provide + Inject to the Rescue

Provide + Inject for Functions/Methods

Provide + Inject Versus Props and Custom Events

Module Summary

Chapter 9 : Diving Deeper into Components

Module Introduction

Project Setup

Global Versus Local Components

Scoped Styles

Introducing Slots

Named Slots

Slot Styles and Compilation

More on Slots

Scoped Slots

Dynamic Components

Keeping Dynamic Components Alive

Applying What You Know + a Problem

Teleporting Elements

Working with Fragments

The Vue Style Guide

Moving to a Different Folder Structure

Module Summary

Chapter 10 : Course Project: The Learning Resources App

Module Introduction

Setup and First Steps

First Component and Prop

Styling and More Components

Header and BaseCard Components

Adding a Base Button

Dynamic Components and the Fallthrough Attribute

Adding and Styling Tabs

Adding a Form

Fetching User Input

Adding a Modal Dialog

Deleting Items

Adding “Teleport”

Chapter 11 : Forms

Module Introduction

V-Model and Inputs

Working with V-Model Modifiers and Numbers

V-Model and Dropdowns

Using V-Model with Checkboxes and Radio Buttons

Adding Basic Form Validation

Building a Custom Control Component

Using V-Model on Custom Components

Module Summary

Chapter 12 : Sending HTTP Requests

Module Introduction

Starting App and Why You Need a Backend

Adding a Backend

How to (Not) Send HTTP Requests

Sending a POST Request to Store Data

Getting Data (GET Request) and 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

Chapter 13 : Routing: Building “Multi-Page” Single Page Applications

Module Introduction

Routing: What and Why?

Routing Setup

Registering and Rendering Routes

Navigating with Router-link

Styling Active Links

Programmatic Navigation

Passing Data with Route Params (Dynamic Segments)

Navigation and Dynamic Paths

Updating Params Data with Watchers

Passing Params as Props

Redirecting and “Catch All” Routes

Using Nested Routes

More Fun with Named Routes and 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

Chapter 14 : Animations and Transitions

Module Introduction

Animation Basics and 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”

Animating List Item Movement

Animating Route Changes

Chapter 15 : Vuex

Module Introduction

Vuex: What and Why?

Creating and 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 States

Organizing Your Store with Modules

Understanding Local Module State

Namespacing Modules

Structuring Vuex Code and Files

A Challenge!

Challenge Solution – Part 1

Challenge Solution – Part 2

Challenge Solution – Part 3

Summary

Chapter 16 : Main Project: “Find a Coach” Web 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 and 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 Using HTTP Requests

Caching HTTP Response Data

Adding Route Transitions

The “Not Found” Page and Summary

Chapter 17 : Vue and Authentication

Module Introduction

How Authentication Works in Vue Apps [or Any Single-Page Application (SPA)]?

Locking/Protecting Backend Resources

Adding an Authentication Page (Login and Signup)

Preparing Vuex

Adding a “Signup” Action and Flow

Better UX: Loading Spinner and Error Handling

Adding a “Login” Action and Flow

Attaching the Token to Outgoing Requests

Updating the UI Based on Auth State

Adding a “Logout” Action and Flow

Authentication and Routing (Including Navigation Guards)

Adding “Auto Login”

Adding “Auto Logout”

Summary

Chapter 18 : Optimizing and Deploying Vue Apps

Module Introduction

What to Deploy?

Optimization: Using Asynchronous Components

Building the Project for Production

Deploying a Vue App

Chapter 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, and 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, and the Composition API

Route and Router Objects and the Composition API

Using Vuex with the Composition API

Summary

Chapter 20 : Reusing Functionality: Mixins and Custom Composition Functions

Module Introduction

Reusability Concepts

Using Mixins

Merging Mixins

Global Mixins

Disadvantages of Mixins

Custom Hooks/Composable and the Composition API

More Custom Composition Functions

Why Hooks/Composable Beat Mixins?

Example: Creating a “Search” Hook

Custom Hooks Gotchas

More Thoughts on Custom Hooks/Composable

Example: A Custom “Sort” Hook

Chapter 21 : Roundup and Next Steps

Course Roundup and Next Steps

Chapter 22 : Vue 2 to Vue 3 Migration

Vue 3 - Overview

Important Changes and Migration Steps

Vue 3: New Features

The New Composition API (Optional)

About This Course and Vue 3

Chapter 23 : Getting Started [VUE2]

Course Introduction

Creating Your First Vue.js Application

Extending the Vue.js Application

Course Structure

Take Advantage of All Course Resources!

Set Up Vue.js Locally

Chapter 24 : Using Vue.js to Interact with the Document Object Model (DOM) [VUE2]

Module Introduction

Understanding Vue.js Templates

How the Vue.js Template Syntax and Instance Work Together

Accessing Data in the Vue Instance

Binding 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

Writing JavaScript Code in the Templates

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

Chapter 25 : 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 While Using V-For

Module Wrap Up

Chapter 26 : First Course Project - The Monster Slayer [VUE2]

Introduction and 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 an “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

Chapter 27 : Understanding the Vue.js Instance [VUE2]

Module Introduction

Some Basics about the Vue.js Instance

Using Multiple Vue Instances

Accessing the Vue Instance from Outside

How Vue.js 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 Vue.js Updates the Document Object Model (DOM)?

The Vue.js Instance Lifecycle

The Vue.js Instance Lifecycle in Practice

Module Wrap Up

Chapter 28 : Moving to a “Real” Development Workflow with Webpack and Vue CLI [VUE2]

Module Introduction

Why Do You 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

Overview of the Webpack Template Folder Structure

Understanding the “.vue” Files

Understanding the Object in the Vue File

How to Build Your App for Production

Module Wrap Up

Chapter 29 : An Introduction to Components [VUE2]

Module Introduction

An Introduction to Components

Storing Data in Components with the Data Method

Registering Components Locally and Globally

“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

Chapter 30 : 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

Chapter 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

A Summary on Slots

Switching Multiple Components with Dynamic Components

Understanding Dynamic Component Behavior

Keeping Dynamic Components Alive

Dynamic Component Lifecycle Hooks

Wrap Up

Chapter 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 an Info Box

Allowing for Quote Deletion

Controlling Quotes with a Progress Bar

Finishing Touches and State Management

Chapter 33 : Handling User Input with Forms [VUE2]

Module Introduction

A Basic Form Binding

Grouping Data and Pre-Populating Inputs

Modifying User Input with Input Modifiers

Binding and Handling User Input

Using Checkboxes and Saving Data in Arrays

Using Radio Buttons

Handling Dropdowns with and

Chapter 34 : 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

Chapter 35 : Improving your App with Filters and Mixins [VUE2]

Module Introduction

Creating a Local Filter

What are Global Filters and How to Chain Multiple Filters?

An (Often 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

Chapter 36 : Adding Animations and Transitions [VUE2]

Module Introduction

Understanding Transitions

Preparing a 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

Chapter 37 : Connecting to Servers through HTTP - Using Vue-Resource [VUE2]

Module Introduction

Accessing HTTP through Vue-Resource – Setup

Creating an Application and Setting Up a Server (Firebase)

POST Data to a Server (Sending a POST Request)

Sending 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 Versus “Normal” HTTP Requests

Understanding Template URLs

Wrap Up

Chapter 38 : Routing in a Vue.js Application [VUE2]

Module Introduction

Setting Up the Vue.js Router (Vue-router)

Setting Up and Loading Routes

Understanding Routing Modes (Hash Versus History)

Navigating with Router Links

Styling Active Links

Navigating from a 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

Chapter 39 : Better State Management with Vuex [VUE2]

Module Introduction

Why a Different State Management may Be Needed

UUnderstanding “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

Chapter 40 : Final Project - The Stock Trader [VUE2]

Project Introduction

Project Setup and Planning

Creating the First Components

Set Up 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 and 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

Chapter 41 : Deploying a Vue.js Application [VUE2]

Module Introduction

Preparing for Deployment

Deploying the App (Example: AWS S3)

Chapter 42 : 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 and Using Response Data

Setting a Global Request Configuration

Using Interceptors

Custom Axios Instances

Wrap Up

Chapter 43 : Bonus: Authentication in Vue Apps

Section Introduction

Module Introduction

How Authentication Works in Single-Page Applications (SPAs)

Project Setup

Adding User Sign-Up

Adding User Sign-In (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