Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Vue 3 - The Complete Guide (incl. Router, Vuex, Composition API)
Getting Started
Welcome to the Course! (1:39)
What is "Vue.js"? (7:51)
Different Ways of Using Vue (2:35)
Exploring Vue Alternatives (3:11)
Building A First App With Just JavaScript (7:26)
Re-building the App with Vue (11:39)
Vue vs "Vanilla JavaScript" (just JavaScript) (1:10)
Setting Up the Course Development Environment (2:04)
Course Outline & What's In The Course (2:58)
How To Get The Most Out Of This Course (3:23)
Module Resources
The Academind Pro Referral Program
Basics & Core Concepts - DOM Interaction with Vue
Module Introduction (0:48)
Creating and Connecting Vue App Instances (8:40)
Interpolation and Data Binding (3:35)
Binding Attributes with the "v-bind" Directive (5:37)
Understanding "methods" in Vue Apps (5:47)
Working with Data inside of a Vue App (3:23)
Outputting Raw HTML Content with v-html (3:31)
A First Summary (4:12)
Time to Practice: Data Binding - Problem (2:55)
Time to Practice: Data Binding - Solution (11:34)
Understanding Event Binding (7:17)
Events & Methods (6:12)
Working with Event Arguments (2:59)
Using the Native Event Object (8:59)
Exploring Event Modifiers (9:53)
Locking Content with v-once (2:07)
Time to Practice: Event Binding - Problem (1:47)
Time to Practice: Event Binding - Solution (8:54)
Data Binding + Event Binding = Two-Way Binding (6:32)
Methods used for Data Binding: How It Works (6:46)
Introducing Computed Properties (5:58)
Working with Watchers (10:49)
Methods vs Computed Properties vs Watchers (2:27)
v-bind and v-on Shorthands (1:53)
Time to Practice: Reactivity - Problem (1:57)
Time to Practice: Reactivity - Solution (9:00)
Dynamic Styling with Inline Styles (7:19)
Adding CSS Classes Dynamically (6:31)
Classes & Computed Properties (1:57)
Dynamic Classes: Array Syntax (1:22)
Time to Practice: Dynamic Styling - Problem (2:32)
Time to Practice: Dynamic Styling - Solution (8:24)
Module Summary (4:14)
Module Resources
Rendering Conditional Content & Lists
Module Introduction (1:35)
Understanding the Problem (3:16)
Rendering Content Conditionally (5:09)
v-if, v-else and v-else-if (4:18)
Using v-show Instead Of v-if (2:25)
Rendering Lists of Data (6:20)
Diving Deeper Into v-for (5:12)
Removing List Items (3:59)
Lists & Keys (8:26)
Time to Practice: Conditional Content & Lists - Problem (1:09)
Time to Practice: Conditional Content & Lists - Solution (8:48)
Module Summary (2:15)
Module Resources
Course Project: The Monster Slayer Game
Module Introduction (1:18)
Project Setup & First Methods (12:27)
Updating the Health Bars (7:07)
Adding a "Special Attack" (6:23)
Adding a "Heal" Functionality (4:46)
Adding a "Game Over" Screen (9:37)
Finishing the Core Functionality (6:08)
Adding a Battle Log (14:11)
Module Resources
Vue: Behind the Scenes
Module Introduction (1:31)
An Introduction to Vue's Reactivity (4:26)
Vue Reactivity: A Deep Dive (8:10)
One App vs Multiple Apps (3:53)
Understanding Templates (3:56)
Working with Refs (5:21)
How Vue Updates the DOM (6:26)
Vue App Lifecycle - Theory (4:46)
Vue App Lifecycle - Practice (9:48)
Module Resources
Introducing Components
Module Introduction (1:30)
Understanding the Problem (8:39)
Introducing Components (10:54)
The Why: Building Complex User Interfaces With Components (1:00)
Multiple Vue Apps vs Multiple Components
Module Resources
Moving to a Better Development Setup & Workflow with the Vue CLI
Module Introduction (1:35)
Why We Need A Development Server (3:29)
Why We Want A Better Developer Experience (5:50)
Installing & Using the Vue CLI (8:26)
Inspecting the Created Project (5:58)
Inspecting the Vue Code & ".vue" Files (6:04)
Adding the "Vetur" Extension to VS Code (1:15)
More on ".vue" Files (1:40)
A New Vue Project (5:05)
Creating a Basic Vue App (9:32)
Adding a Component (8:14)
Adding Styling (2:16)
A Small Addition
Module Resources
Component Communication
Module Introduction (1:41)
Introducing "Props" (Parent => Child Communication) (10:03)
Prop Behavior & Changing Props (6:30)
Validating Props (7:14)
Supported Prop Values
Working with Dynamic Prop Values (5:37)
Emitting Custom Events (Child => Parent Communication) (11:15)
Defining & Validating Custom Events (4:05)
Prop / Event Fallthrough & Binding All Props
Demo: Adding Components & Connecting Them (13:15)
Demo: Adding More Component Communication (6:24)
Time to Practice: Props & Custom Events - Problem (3:13)
Time to Practice: Props & Custom Events - Solution (21:38)
A Potential Problem (6:26)
Provide + Inject To The Rescue (8:16)
Provide + Inject for Functions / Methods (3:59)
Provide + Inject for Functions / Methods (2:06)
Module Summary (4:44)
Module Resources
Diving Deeper Into Components
Module Introduction (1:38)
Project Setup (2:38)
Global vs Local Components (9:21)
Scoped Styles (5:15)
Introducing Slots (6:23)
Named Slots (5:35)
Slot Styles & Compilation (2:26)
More on Slots (7:19)
Scoped Slots (9:34)
Dynamic Components (7:06)
Keeping Dynamic Components Alive (2:44)
Applying What We Know & A Problem (9:24)
Teleporting Elements (3:50)
Working with Fragments (1:23)
The Vue Style Guide (3:02)
Moving to a Different Folder Structure (2:56)
Module Summary (3:38)
Module Resources
Course Project: The Learning Resources App
Module Introduction (1:37)
Setup & First Steps (5:24)
First Components & Props (10:46)
Styling and More Components (7:19)
Header & BaseCard Components (7:00)
Adding a Base Button (5:19)
Dynamic Components & Attribute Fallthrough (8:37)
Adding & Styling Tabs (4:58)
Adding a Form (4:12)
Fetching User Input (8:27)
Adding a Modal Dialog (12:19)
Deleting Items (6:42)
Adding "Teleport" (1:28)
Module Resources
Forms
Module Introduction (0:33)
v-model & Inputs (6:03)
Working with v-model Modifiers and Numbers (6:54)
v-model and Dropdowns (2:25)
Using v-model with Checkboxes & Radiobuttons (7:13)
Adding Basic Form Validation (5:13)
Building a Custom Control Component (6:27)
Using v-model on Custom Components (6:48)
Module Summary (1:14)
Module Resources
Sending Http Requests
Module Introduction (1:08)
Starting App & Why we need a Backend (5:04)
Adding a Backend (3:21)
How To (Not) Send Http Requests (5:23)
Sending a POST Request to Store Data (5:45)
Http Requests & Http Methods (Verbs)
Getting Data (GET Request) & Transforming Response Data (9:51)
Loading Data When a Component Mounts (2:00)
Showing a "Loading..." Message (2:55)
Handling the "No Data" State (3:00)
Handling Technical / Browser-side Errors (6:41)
Handling Error Responses (6:49)
Module Summary (1:31)
Module Resources
Routing: Building "Multi-Page" Single Page Applications
Module Introduction (0:41)
What & Why? (4:39)
Routing Setup (4:36)
Registering & Rendering Routes (6:25)
Navigating with router-link (4:55)
Styling Active Links (3:05)
Programmatic Navigation (4:01)
Passing Data with Route Params (Dynamic Segments) (10:46)
Navigation & Dynamic Paths (3:00)
Updating Params Data with Watchers (5:30)
Passing Params as Props (3:37)
Redirecting & "Catch All" Routes (7:50)
Using Nested Routes (5:34)
More Fun with Named Routes & Location Objects (5:21)
Using Query Params (3:59)
Rendering Multiple Routes with Named Router Views (5:51)
Controlling Scroll Behavior (6:17)
Introducing Navigation Guards (7:31)
Diving Deeper Into Navigation Guards (6:50)
The Global "afterEach" Guard (1:27)
Beyond Entering: Route Leave Guards (7:13)
Utilizing Route Metadata (2:14)
Organizing Route Files (4:49)
Summary (2:12)
Module Resources
Animations & Transitions
Module Introduction (1:11)
Animation Basics & CSS Transitions (7:28)
Understanding CSS Animations (4:20)
Why Is "Just CSS" Not Enough? (4:27)
Playing CSS Animations with Vue's Help (4:45)
Using the Transition Component (5:02)
CSS Animations with the Transition Component (2:28)
Using Custom CSS Class Names (3:34)
Example: Animating a Modal (8:38)
Transitioning Between Multiple Elements (9:15)
Using Transition Events (8:31)
Building JavaScript Transitions (instead of CSS) (14:57)
Disabling CSS Transitions (3:05)
Getting Started with Animated Lists (6:44)
Animating Lists with "transition-group" (5:26)
Animate List Item Movement (3:53)
Animating Route Changes (12:15)
An Important Note on Animated Route Changes
Module Resources
Vuex
Module Introduction (0:59)
What & Why? (7:11)
Creating & Using a Store (4:43)
Connecting Components to State (2:36)
Introducing Mutations - A Better Way of Changing Data (6:30)
Passing Data to Mutations with Payloads (4:07)
Introducing Getters - A Better Way Of Getting Data (7:40)
Running Async Code with Actions (7:33)
Understanding the Action "Context" (2:02)
Using Mapper Helpers (5:57)
Example: Adding More State (8:09)
Organizing your Store with Modules (4:10)
Understanding Local Module State (4:27)
Namespacing Modules (5:03)
Structuring Vuex Code & Files (8:43)
A Challenge! (1:51)
Challenge Solution (1/3) (12:00)
Challenge Solution (2/3) (11:27)
Challenge Solution (3/3) (3:18)
Summary (1:19)
Module Resources
Main Project: "Find a Coach" Web App
Module Introduction (2:35)
Planning the Project / Web App (4:26)
Planning the Data Requirements (5:11)
Planning the Layout / Components (5:06)
Registering Routes (5:58)
Adding Route Page Components (5:27)
Working on the Main Layout & Styling (7:42)
Wiring Up Pages (5:22)
Adding Vuex and Coach Data (12:15)
Working on the Coaches List and List Items (11:21)
Adding a Couple of Base Components (Base Card, Base Button, Base Badge) (12:53)
Building the Coach Detail Component (8:24)
Filtering Coaches (11:10)
Registering as a Coach: The Form (10:13)
Adding Coaches to Vuex (13:36)
Adding Form Validation (12:35)
Working on the Contact Form (8:08)
Storing Requests (Messages) With Vuex (8:31)
Outputting Incoming Requests (Messages) (10:01)
Filtering Requests for the Active Coach (4:44)
Sending a PUT Http Request to Store Coach Data (11:05)
Fetching Coach Data (GET Http Request) (7:51)
Rendering a Loading Spinner (6:38)
Adding Http Error Handling (9:17)
Sending Coaching Requests Http Requests (15:48)
Caching Http Response Data (8:28)
Adding Route Transitions (10:19)
The "Not Found" Page & Summary (2:19)
Module Resources
Vue & Authentication
Module Introduction (1:00)
How Authentication Works in Vue Apps (or any SPA) (6:09)
Locking / Protecting Backend Resources (5:56)
Adding an Authentication Page (Login & Signup) (9:54)
Preparing Vuex (4:22)
Adding a "Signup" Action & Flow (9:05)
Better UX: Loading Spinner & Error Handling (5:30)
Adding a "Login" Action & Flow (3:15)
Attaching the Token to Outgoing Requests (4:19)
Updating the UI Based on Auth State (4:04)
Adding a "Logout" Action & Flow (3:34)
Authentication & Routing (incl. Navigation Guards) (11:41)
Adding "Auto Login" (8:52)
Adding "Auto Logout" (13:34)
Summary (1:19)
Module Resources
Optimizing & Deploying Vue Apps
Module Introduction (1:10)
What To Deploy? (2:50)
Optimization: Using Asynchronous Components (12:16)
Building the Project For Production (3:54)
Deploying a Vue App (8:55)
Module Resources
The Composition API - Replacing the Options API
Module Introduction (2:00)
Which Problem Does The Composition API Solve? (6:51)
Replacing "data" with "refs" (11:29)
Replacing the setup() Method
Building "reactive" Objects (10:57)
Reactivity: A Deep Dive (8:23)
Replacing "methods" with Regular Functions (7:01)
Time to Practice: Data & Functions - Problem (2:39)
Time to Practice: Data & Functions - Solution (14:24)
Replacing "Computed Properties" with the "computed" Function (7:52)
Two-Way-Binding and the Composition API (2:58)
Working with Watchers (5:42)
Time to Practice: Composition API Core Building Blocks - Problem (1:07)
Time to Practice: Composition API Core Building Blocks - Solution (7:00)
A First Summary (1:37)
How To Use Template Refs (4:49)
Components, Props & The Composition API (7:57)
Emitting Custom Events (2:33)
Working with Provide/ Inject (3:42)
Lifecycle Hooks in the Composition API (5:13)
Migrating from Options API to Composition API - An Example Project (1:55)
Migrating a First Component (6:40)
Migrating a Big Component (12:38)
Migrating the Remaining Components (11:56)
Routing, Params & The Composition API (7:27)
The Route & Router Objects and the Composition API (5:08)
Using Vuex with the Composition API (4:33)
Summary (3:09)
Module Resources
Reusing Functionality: Mixins & Custom Composition Functions
Module Introduction (1:16)
Reusability Concepts (4:54)
Using Mixins (4:48)
Understanding Mixin Merging (3:11)
Global Mixins (2:52)
Disadvantages of Mixins (3:28)
Custom Hooks / Composables & The Composition API (8:40)
More Custom Composition Functions (3:48)
Why Hooks / Composables Beat Mixins (1:26)
Example: Creating a "Search" Hook (11:28)
Custom Hooks Gotchas (8:43)
More Thoughts on Custom Hooks / Composables (2:54)
Example: A Custom "Sort" Hook (5:29)
Module Resources
Roundup & Next Steps
Course Roundup & Next Steps (3:08)
Vue 2 to Vue 3 Migration
Vue 3 - Overview (6:30)
Important Changes & Migration Steps (17:51)
Vue 3: New Features (5:27)
The New Composition API (Optional!) (23:45)
Working on the Coaches List and List Items
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock