Vue - The Complete Guide (incl. Router & Composition API)

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

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

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

Dynamic Classes: Array Syntax

Module Summary

Important: Changed Vue Script Import Path

Time to Practice: Data Binding

Time to Practice: Event Binding

Time to Practice: Reactivity

Time to Practice: Dynamic Styling

Module Resources

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

Module Summary

Time to Practice: Conditional Content & Lists

Module Resources

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

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

Module Introduction

Understanding the Problem

Introducing Components

The Why: Building Complex User Interfaces With Components

Multiple Vue Apps vs Multiple Components

Module Resources

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

Fixing npm run serve (Vue CLI)

A Small Addition

An Alternative Setup - using "npm init" & Volar

Module Resources

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

Demo: Adding Components & Connecting Them

Demo: Adding More Component Communication

A Potential Problem

Provide + Inject To The Rescue

Provide + Inject for Functions / Methods

Provide + Inject vs Props & Custom Events

Module Summary

Supported Prop Values

Prop / Event Fallthrough & Binding All Props

Time to Practice: Props & Custom Events

Module Resources

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

Module Resources

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"

Module Resources

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

Module Resources

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

Http Requests & Http Methods (Verbs)

Using Axios Instead Of "fetch()"

Module Resources

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

A Vue Bug

Module Resources

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

An Important Note on Animated Route Changes

Module Resources

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

Module Resources

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

Module Resources

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

Module Resources

Module Introduction

What To Deploy?

Optimization: Using Asynchronous Components

Building the Project For Production

Deploying a Vue App

Note: Async Components & Routing

Module Resources

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

Replacing the setup() Method

Time to Practice: Data & Functions

Time to Practice: Composition API Core Building Blocks

Module Resources

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

Module Resources

Thanks for being part of the course!

Course Roundup & Next Steps

Vue 3 - Overview

Important Changes & Migration Steps

Vue 3: New Features

The New Composition API (Optional!)

Further Migration Resources

Vue 2 Course Content

Time to Practice - Outputting Data to Templates

Time to Practice - Events

Time to Practice - Reactive Properties

Time to Practice - Styling

Time to Practice - Conditionals & Lists

Time to Practice - Components

Time to Practice - Component Communication

Bonus: More Content!