Autoplay
Autocomplete
Previous Lesson
Complete and Continue
[LEGACY] Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Getting Started
Take the Vue 3 Course!
Course Introduction (3:08)
Use Vue 2
Let's Create our First VueJS Application (4:45)
Extending the VueJS Application (4:12)
Join our Online Learning Community
Course Structure (3:44)
Take Advantage of all Course Resources! (1:55)
Setup VueJS Locally (2:02)
Useful Resources & Links
The Academind Pro Referral Program
Using VueJS to Interact with the DOM
Module Introduction (0:45)
Understanding VueJS Templates (2:34)
How the VueJS Template Syntax and Instance Work Together (2:42)
Accessing Data in the Vue Instance (1:49)
Binding to Attributes (2:42)
Understanding and Using Directives (1:27)
Disable Re-Rendering with v-once (1:41)
How to Output Raw HTML (2:43)
Assignment: Outputting Data to Templates (Problem) (1:59)
Assignment: Outputting Data to Templates (Solution) (6:12)
Listening to Events (1:50)
Getting Event Data from the Event Object (2:36)
Passing your own Arguments with Events (1:53)
Modifying an Event - with Event Modifiers (3:23)
Listening to Keyboard Events (2:03)
Assignment: Events (Problem) (1:42)
Assignment: Events (Solution) (4:54)
Writing JavaScript Code in the Templates (3:19)
Using Two-Way-Binding (1:49)
Reacting to Changes with Computed Properties (9:32)
An Alternative to Computed Properties: Watching for Changes (3:53)
Saving Time with Shorthands (1:26)
Assignment: Reactive Properties (Problem) (2:28)
Assignment: Reactive Properties (Solution) (5:47)
Dynamic Styling with CSS Classes - Basics (4:22)
Dynamic Styling with CSS Classes - Using Objects (1:35)
Dynamic Styling with CSS Classes - Using Names (3:27)
Setting Styles Dynamically (without CSS Classes) (3:15)
Styling Elements with the Array Syntax (1:14)
Assignment: Styling (Problem) (3:48)
Assignment: Styling (Solution) (18:17)
Wrap Up (0:44)
Useful Resources & Links
Using Conditionals and Rendering Lists
Module Introduction (0:48)
Conditional Rendering with v-if (3:37)
Using an Alternative v-if Syntax (1:36)
Don't Detach it with v-show (1:43)
Rendering Lists with v-for (2:25)
Getting the Current Index (1:51)
Using an Alternative v-for Syntax (1:10)
Looping through Objects (4:44)
Looping through a List of Numbers (0:57)
Keeping Track of Elements when using v-for (4:08)
Assignment: Conditionals & Lists (Problem) (1:40)
Assignment: Conditionals & Lists (Solution) (9:38)
Wrap Up (0:51)
First Course Project - The Monster Slayer
Introduction & Challenge (2:54)
Setting up the Course Project (2:37)
Creating the Vue Instance and Styling the Healthbars (5:16)
Showing the Player Controls Conditionally (2:02)
Implementing a "Start Game" Method (1:53)
Implementing a "Attack" Method (8:03)
Write better Code - Time for Refactoring! (4:52)
Implementing a "Special Attack" (2:11)
Implementing a "Heal" Method (2:21)
Finishing the Action Buttons (0:59)
Creating an Action Log (2:41)
Printing the Log (v-for) (2:19)
Finishing the Log (1:57)
Styling the Log Conditionally (1:44)
Wrap Up (1:28)
Full Application Code
Understanding the VueJS Instance
Module Introduction (1:04)
Some Basics about the VueJS Instance (2:58)
Using Multiple Vue Instances (2:52)
Accessing the Vue Instance from Outside (3:29)
How VueJS manages your Data and Methods (4:01)
A Closer Look at $el and $data (4:55)
Placing $refs and Using them on your Templates (5:47)
Where to learn more about the Vue API (0:58)
Mounting a Template (6:42)
Using Components (4:56)
Limitations of some Templates (2:35)
How VueJS Updates the DOM (3:24)
The VueJS Instance Lifecycle (3:11)
The VueJS Instance Lifecycle in Practice (5:39)
Wrap Up (0:54)
Useful Resources & Links
Moving to a "Real" Development Workflow with Webpack and Vue CLI
Module Introduction (1:33)
Why do we need a Development Server? (2:47)
What does "Development Workflow" mean? (3:51)
Using the Vue CLI to create Projects (2:35)
Installing the Vue CLI and Creating a new Project (4:17)
An Overview over the Webpack Template Folder Structure (3:40)
Understanding ".vue" Files (6:45)
Understanding the Object in the Vue File (1:11)
How to Build your App for Production (0:49)
More about ".vue" Files & the CLI
Debugging VueJS Projects
Wrap Up (1:11)
An Introduction to Components
Module Introduction (1:04)
An Introduction to Components (4:56)
Storing Data in Components with the Data Method (4:03)
Registering Components Locally and Globally (2:50)
The "Root Component" in the App.vue File (3:21)
Creating a Component (4:24)
Using Components (5:32)
Assignment: Components Basics (Problem) (1:44)
Assignment: Components Basics (Solution) (2:12)
Moving to a Better Folder Structure (2:42)
How to Name your Component Tags (Selectors) (4:31)
Scoping Component Styles (5:04)
Wrap Up (0:50)
Useful Resources & Links
Communicating between Components
Module Introduction (0:45)
Communication Problems (2:52)
Using Props for Parent => Child Communication (3:10)
Naming "props" (1:09)
Using "props" in the Child Component (1:28)
Validating "props" (4:56)
Using Custom Events for Child => Parent Communication (5:55)
Understanding Unidirectional Data Flow (1:07)
Communicating with Callback Functions (2:23)
Communication between Sibling Components (6:24)
Using an Event Bus for Communication (5:31)
Centralizing Code in an Event Bus (2:14)
Assignment: Component Communication (Problem) (3:06)
Assignment: Component Communication (Solution) (10:17)
Wrap Up (0:40)
Useful Resources & Links
Advanced Component Usage
Module Introduction (0:38)
Setting up the Module Project (3:00)
Passing Content - The Suboptimal Solution (2:19)
Passing Content with Slots (0:42)
How Slot Content gets Compiled and Styled (3:02)
Using Multiple Slots (Named Slots) (2:49)
Default Slots and Slot Defaults (2:01)
A Summary on Slots (0:45)
Switching Multiple Components with Dynamic Components (5:31)
Understanding Dynamic Component Behavior (2:07)
Keeping Dynamic Components Alive (0:58)
Dynamic Component Lifecycle Hooks (1:17)
Assignment: Advanced Components (Problem) (1:27)
Assignment: Advanced Components (Solution) (3:00)
Wrap Up (1:10)
Useful Resources & Links
Second Course Project - Wonderful Quotes
Module Introduction (1:35)
Setting up the Project (1:21)
Initializing the Application (1:28)
Creating the Application Components (4:03)
Passing Data with Props and Slots (2:13)
Allowing Users to Create Quotes with a NewQuote Component (4:08)
Adding Quotes with Custom Events (3:34)
Adding a Info Box (1:05)
Allowing for Quote Deletion (3:40)
Controlling Quotes with a Progress Bar (3:51)
Finishing Touches and State Management (2:13)
Useful Resources & Links
Handling User Input with Forms
Module Introduction (0:53)
A Basic Form Binding (3:46)
Grouping Data and Pre-Populating Inputs (2:42)
Modifying User Input with Input Modifiers (2:58)
Binding and Saving Line Breaks (2:52)
Using Checkboxes and Saving Data in Arrays (4:05)
Using Radio Buttons (2:30)
Handling Dropdowns with and (5:09)
What v-model does and How to Create a Custom Control (2:49)
Creating a Custom Control (Input) (5:13)
Submitting a Form (2:07)
Assignment: Forms (Problem) (1:29)
Assignment: Forms (Solution) (15:17)
Wrap Up (0:43)
Useful Resources & Links
Using and Creating Directives
Module Introduction (0:53)
Understanding Directives (3:34)
How Directives Work - Hook Functions (2:28)
Creating a Simple Directive (1:21)
Passing Values to Custom Directives (1:08)
Passing Arguments to Custom Directives (2:40)
Modifying a Custom Directive with Modifiers (2:24)
Custom Directives - A Summary (0:28)
Registering Directives Locally (1:37)
Using Multiple Modifiers (4:27)
Passing more Complex Values to Directives (2:13)
Assignment: Directives (Problem) (0:54)
Assignment: Directives (Solution) (5:54)
Wrap Up (0:44)
Useful Resources & Links
Improving your App with Filters and Mixins
Module Introduction (0:45)
Creating a Local Filter (4:32)
Global Filters and How to Chain Multiple Filters (1:44)
An (often-times better) Alternative to Filters: Computed Properties (5:14)
Understanding Mixins (2:23)
Creating and Using Mixins (2:25)
How Mixins get Merged (2:57)
Creating a Global Mixin (Special Case!) (3:25)
Mixins and Scope (2:33)
Assignments: Filters & Mixins (Problem) (1:08)
Assignments: Filters & Mixins (Solution) (8:12)
Wrap Up (1:56)
Useful Resources & Links
Adding Animations and Transitions
Module Introduction (1:08)
Understanding Transitions (1:01)
Preparing Code to use Transitions (3:11)
Setting Up a Transition (3:08)
Assigning CSS Classes for Transitions (2:27)
Creating a "Fade" Transition with the CSS Transition Property (3:21)
Creating a "Slide" Transition with the CSS Animation Property (3:58)
Mixing Transition and Animation Properties (3:31)
Animating v-if and v-show (0:33)
Setting Up an Initial (on-load) Animation (1:30)
Using Different CSS Class Names (4:01)
Using Dynamic Names and Attributes (2:32)
Transitioning between Multiple Elements (Theory) (0:33)
Transitioning between Multiple Elements (Practice) (4:42)
Listening to Transition Event Hooks (2:05)
Understanding JavaScript Animations (8:03)
Excluding CSS from your Animation (1:27)
Creating an Animation in JavaScript (6:18)
Animating Dynamic Components (5:57)
Animating Lists with "transition-group" (0:43)
Using "transition-group" - Preparations (4:19)
Using "transition-group" to Animate a List (6:12)
Understanding the App (1:14)
Creating the App (12:04)
Adding Animations (6:38)
Wrap Up (1:03)
Useful Resources & Links
Connecting to Servers via Http - Using vue-resource
Module Introduction (1:42)
Accessing Http via vue-resource - Setup (4:00)
Creating an Application and Setting Up a Server (Firebase) (5:24)
POSTing Data to a Server (Sending a POST Request) (6:10)
GETting and Transforming Data (Sending a GET Request) (6:54)
Configuring vue-resource Globally (2:48)
Intercepting Requests (3:33)
Intercepting Responses (2:51)
Where the "resource" in vue-resource Comes From (4:42)
Creating Custom Resources (2:38)
Resources vs "Normal" Http Requests (0:27)
Understanding Template URLs (5:05)
Wrap Up (1:42)
Useful Resources & Links
Routing in a VueJS Application
Module Introduction (1:37)
Setting up the VueJS Router (vue-router) (2:16)
Setting Up and Loading Routes (6:43)
Understanding Routing Modes (Hash vs History) (4:14)
Navigating with Router Links (3:45)
Where am I? - Styling Active Links (3:20)
Navigating from Code (Imperative Navigation) (2:42)
Setting Up Route Parameters (1:59)
Fetching and Using Route Parameters (2:03)
Reacting to Changes in Route Parameters (3:04)
vue-router 2.2: Extract Route Params via "props"
Setting Up Child Routes (Nested Routes) (4:39)
Navigating to Nested Routes (3:09)
Making Router Links more Dynamic (2:04)
A Better Way of Creating Links - With Named Routes (3:21)
Using Query Parameters (2:54)
Multiple Router Views (Named Router Views) (3:27)
Redirecting (2:13)
Setting Up "Catch All" Routes / Wildcards (1:05)
Animating Route Transitions (2:34)
Passing the Hash Fragment (3:28)
Controlling the Scroll Behavior (3:21)
Protecting Routes with Guards (1:12)
Using the "beforeEnter" Guard (7:50)
Using the "beforeLeave" Guard (3:31)
Loading Routes Lazily (7:08)
Wrap Up (1:02)
Useful Resources & Links
Better State Management with Vuex
Module Introduction (1:12)
Why a Different State Management May Be Needed (2:24)
Understanding "Centralized State" (1:32)
Using the Centralized State (6:49)
Why a Centralized State Alone Won't Fix It (2:41)
Understanding Getters (0:48)
Using Getters (2:40)
Mapping Getters to Properties (6:57)
Understanding Mutations (1:14)
Using Mutations (4:50)
Why Mutations have to run Synchronously (1:34)
How Actions improve Mutations (1:32)
Using Actions (4:59)
Mapping Actions to Methods (4:57)
A Summary of Vuex (4:13)
Two-Way-Binding (v-model) and Vuex (5:56)
Improving Folder Structures (1:01)
Modularizing the State Management (4:56)
Using Separate Files (4:17)
Using Namespaces to Avoid Naming Problems (6:44)
Wrap Up (0:50)
Useful Resources & Links
Final Project - The Stock Trader
Project Introduction (3:11)
Project Setup and Planning (2:45)
Creating the First Components (2:55)
Setup Project Routes (4:42)
Adding a Header and Navigation (6:43)
Planning the Next Steps (1:21)
Creating Stocks Components (6:31)
Adding a "Buy" Button (5:56)
Setting up the Vuex State Management (10:20)
Adding a Portfolio Module to Vuex (10:02)
Working on the Portfolio Stocks (6:51)
Connecting the Portfolio with Vuex (2:21)
Time to fix some Errors (2:00)
Displaying the Funds (3:41)
Adding some Order Checks (5:40)
Making Funds Look Nicer with Filters (1:47)
Ending the Day - Randomizing Stocks (5:30)
Animating the Route Transitions (3:14)
Saving & Fetching Data - Adding a Dropdown (2:17)
Setting up vue-resource and Firebase (2:15)
Saving Data (PUT Request) (2:51)
Fetching Data (GET Request) (5:03)
Testing and Bug Fixes (2:50)
Project Wrap Up (1:21)
Bonus: Debugging Vuex with Vue Developer Tools (1:59)
Useful Resources & Links
Deploying a VueJS Application
Module Introduction (1:12)
Preparing for Deployment (1:45)
Deploying the App (Example: AWS S3) (5:57)
Bonus: Using Axios instead of vue-resource
About this Section (0:37)
Module Introduction (1:07)
Project Setup (2:45)
Axios Setup (2:11)
Sending a POST Request (5:39)
Sending a GET Request (2:52)
Accessing & Using Response Data (5:48)
Setting a Global Request Configuration (5:43)
Using Interceptors (5:49)
Custom Axios Instances (4:56)
Wrap Up (0:58)
Useful Resources & Links
Bonus: Authentication in Vue Apps
About this Section (0:52)
Module Introduction (1:59)
How Authentication Works in SPAs (3:10)
Project Setup (2:35)
Adding User Signup (5:14)
Adding User Signin (Login) (2:41)
Using Vuex to send Auth Requests (4:26)
Storing Auth Data in Vuex (3:45)
Accessing other Resources from Vuex (8:41)
Sending the Token to the Backend (5:37)
Protecting Routes (Auth Guard) (2:48)
Updating the UI State (based on Authentication State) (3:00)
Adding User Logout (5:01)
Adding Auto Logout (5:35)
Adding Auto Login (10:36)
Wrap Up (1:01)
Useful Resources & Links
Bonus: Form Input Validation
About this Section (0:57)
Module Introduction (1:04)
Installing Vuelidate (2:03)
Adding a Validator (10:14)
Adding Validation UI Feedback (4:55)
Controlling Styles for Invalid Entries (2:10)
More Validators (6:33)
Validating Passwords For Equality (6:15)
Using the Required-Unless Validator (4:52)
Validating Arrays (7:19)
Controlling the Form Submit Button (2:11)
Creating Custom Validators (2:46)
Async Validators (9:16)
Wrap Up (1:05)
Useful Resources & Links
Bonus: Vue CLI 3+
About Vue CLI 3+
Module Introduction (3:18)
Creating a Project (4:41)
Analyzing the Created Project (4:49)
Using Plugins (4:05)
CSS Pre-Processors (3:14)
Environment Variables (7:28)
Building the Project (3:43)
Instant Prototyping (2:39)
Different Build Targets (8:39)
Using the "Old" CLI Templates (vue init) (1:19)
Using the Graphical User Interface (GUI) (5:05)
Alternative Lazy Loading Syntax
Roundup
Course Roundup (0:58)
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)
About this Course & Vue 3
Using "transition-group" to Animate a List
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock