Autoplay
Autocomplete
Previous Lecture
Complete and Continue
Complete Vue Developer in 2022 (w/ Vuex, Composition API, Router)
Introduction
Complete Vue JS Developer: Zero to Mastery (2:22)
Course Outline (5:55)
Exercise: Meet Your Classmates and Instructor
Vue vs React vs Angular (12:07)
Composition vs. Options API (2:13)
Complete Course Resources + Code
Optional: Vue Documentary
How-to's: Speed up videos, Downloading videos, Subtitles
Vue Fundamentals
Getting Started (7:28)
Vue Dev Tools (5:32)
Working with Data (8:44)
Multiple Vue Instances (4:06)
Accessing the Instance Data (6:02)
Methods (4:40)
Directives (5:07)
Two-way data binding (7:13)
Binding Attributes (2:38)
Outputting Raw HTML (6:00)
Listening to Events (7:08)
Passing on Data with Events (2:33)
Event Modifiers (2:31)
Keyboard Events and Modifiers (4:54)
v-model Modifiers (5:19)
Computed Properties (9:08)
Watchers (3:12)
Binding Classes (8:09)
Binding Styles (5:13)
Conditional Rendering (10:04)
The v-show Directive (4:24)
List Rendering (12:00)
Understanding the role of the key attribute (8:15)
Endorsements On LinkedIN
Project 1: Perspective Playground
Creating a Perspective Playground (11:45)
Copying to the Clipboard (7:25)
Extra Exercise: Copy Button
Vue: Beyond the Fundamentals
Mounting the Vue Instance (4:18)
Understanding Lifecycle Hooks (4:40)
Using Lifecycle Hooks (9:21)
Virtual DOM (7:21)
Understanding Reactivity with Proxies (7:33)
The Vue Compiler (12:58)
Introduction to Components (8:07)
Vue Developer Environment
Overview (2:28)
Optional Videos In Appendix
Installing Webpack (5:32)
Configuring Webpack (9:19)
Installing Babel (5:50)
Configuring Babel (6:23)
Installing SASS (7:51)
Bundling CSS (7:30)
SASS Basics (13:27)
PostCSS (9:14)
Understanding Linting (5:59)
Installing ESLint (8:02)
Configuring ESLint with Visual Studio Code (3:40)
Conclusion (0:48)
Advanced Vue Components
Installing the Vue CLI (10:00)
Sidebar: Understanding Servers (5:35)
Reviewing the Files (11:46)
Creating Components (3:51)
Child Components (7:52)
Component Styles (6:29)
Using SASS in Components (3:03)
Communicating Between Components (2:21)
Props (6:13)
The Limitations of Props (3:54)
Emitting Events (8:34)
Validating Props (7:35)
Callback Functions (4:58)
Inserting content with slots (8:52)
Named Slots (7:07)
Dynamic Components (9:24)
Transitions & Animations
Animating with CSS Transitions (9:47)
Fine-tuning Transitions (5:11)
Animating with CSS Animations (8:32)
Animating with JavaScript (6:34)
JavaScript Zoom Animation (6:51)
CSS and JavaScript Transitions (3:24)
Animating a List (8:53)
Fixing the Animation (4:18)
Transition CSS Class Names (5:40)
Project 2: Vue Quiz App
Setting up the Quiz Application (6:27)
Rendering the Questions (12:03)
Moving between Questions (10:44)
Finishing Touches (11:27)
Master Project: Introduction to Vuex
The Next Step (1:31)
Installing Yarn (3:38)
Introduction to the Vue UI (6:29)
Creating a New Project (9:53)
Reviewing the UI and Files (16:26)
Adding the Template (9:05)
What is Tailwind? (5:36)
Installing Tailwind (7:09)
Practicing with Tailwind (5:15)
Loading Assets (4:25)
Understanding State (5:57)
Reviewing the Vuex Configuration (5:41)
Splitting the Template into Components (5:28)
Working with State (4:30)
Using Mutations (3:59)
Mapping Mutations (2:55)
Understanding Getters (1:33)
Using Getters (4:27)
Closing the Modal (2:09)
Mapping Getters and State Properties (4:09)
Aliases (2:40)
Adding Tabs (5:39)
Exercise: Imposter Syndrome (2:55)
Master Project: Form Validation
Setting up Form Validation (5:18)
Registering A Plugin (5:42)
Validation Components (5:31)
Defining Rules (3:53)
Applying Rules (5:26)
Additional Rules (6:31)
Validating Emails (3:40)
Validating Numbers (4:32)
Validating Passwords (5:01)
Dropdown and Checkbox Fields (7:29)
Validating the Form (4:02)
Sidebar: Slot Properties (8:35)
Rendering Multiple Error Messages (5:51)
Default Values (1:53)
Custom Error Messages (10:35)
Validation Triggers (3:58)
Showing Alerts (8:59)
Setting up the Login Form (18:09)
Master Project: Authentication
Understanding Authentication (6:23)
Reviewing the Rules (5:30)
Setting up the Firebase SDK (8:02)
User Registration (6:30)
Handling the Response (4:48)
Exporting Services (4:54)
Storing the User Form Data (7:56)
Extra Exercise: Add Another Field
Understanding Authentication (6:25)
Logging the user in after Signup (5:26)
Understanding Actions (5:00)
Using Actions (11:23)
Connecting the User with their Data (8:29)
Initializing Firebase First (4:42)
Persisting the User Authentication (6:13)
Setting up the Login (6:01)
Signing Out (10:08)
Sidebar: JSON Web Tokens (9:10)
Master Project: Routing
Understanding Routing (4:45)
Reviewing the Router Configuration (5:56)
Creating Routes (7:13)
History Mode (8:54)
Navigating with Links (5:46)
Custom Links (5:27)
Tailwind Styles for Active Links (5:02)
Naming Routes (4:15)
Setting up “Catch-All” and Redirect Routes (6:23)
Route Alias (2:38)
Guarding Routes (5:13)
Route Specific Guards (4:54)
Guarding Authentication Only Routes (5:10)
Redirecting after Logging Out (5:08)
Route Meta Fields (10:43)
Avoiding Dependency Cycle (6:04)
Master Project: Uploading Files
Preparing the Upload Component (5:48)
Handling Drag and Drop Events (8:12)
Handling the File (6:34)
Uploading Files with Firebase (5:57)
Firebase Rules and Validation (7:01)
Adding the Progress Bar (6:53)
Making the Progress Bar Dynamic (3:13)
Improving the Progress Bar (4:52)
Handling Errors and Successful Uploads (6:42)
Storing the File Data in the Database (10:41)
Firebase References and Snapshots (2:37)
Fallback Upload (4:38)
Canceling Uploads (4:44)
Cancelling Uploads with Refs (7:01)
One more thing about References (4:47)
Querying the Database (6:03)
Storing the List of Songs (4:44)
Displaying the List of Songs (3:02)
Prop Validation (2:52)
Toggling the Form (2:47)
Validating the Song Form (7:00)
Editing a Song (12:53)
Deleting a Song from the Storage/Database (10:06)
Updating the list of songs after an Upload (8:04)
Router Leave Guards (9:43)
Master Project: Playing Music
Creating the Home Page (9:40)
Checking the Scroll Position (8:12)
Infinite Scrolling (8:23)
Path Parameters (4:47)
Creating the Song Template (9:53)
Validating the Comment (3:58)
Prepping the Form (4:42)
Finalizing the Comment Form (10:14)
Displaying the Comments (6:20)
Updating the Comments List (7:34)
Query Parameters (5:43)
Detecting Query Parameters (6:55)
Updating the Comment Count (4:27)
Storing the song in the State (7:14)
Playing Audio (4:04)
Toggling Audio (10:09)
Duration and Current Position (7:44)
Formatting the Time (4:37)
Player Progress Bar (8:30)
Changing the Audio Position (11:06)
Extra Exercise: Update the "play" Button
Creating links with Hash Fragments (4:48)
Route Transitions (4:44)
Master Project: Directives
Introduction to Directives (5:31)
Writing our First Directive (5:50)
Passing Values to Directives (5:21)
Directive Modifiers (5:06)
Registering a Directive Locally (4:39)
Master Project: Internationalization
Introduction to i18n (4:47)
Reviewing the Configuration (7:40)
Our First Translation (8:38)
Formatting and Pluralization (6:41)
Number Localizations (8:28)
Translating HTML with Component Interpolation (6:07)
Changing Locales (5:46)
Exercise: Translating the Rest of the App (3:15)
Master Project: PWA (Progressive Web App)
What are Progressive Web Apps? (4:19)
The Manifest File (5:21)
Generating the Manifest File (8:39)
Configuring the Manifest File (4:15)
Offline Support with Service Workers (5:50)
Workbox (8:02)
Firebase Data Persistence (4:18)
Handling Offline Uploads (5:58)
Master Project: Performance Optimizations
Overview (1:54)
Auto-Registering Global Components (12:17)
Vuex Modules (7:07)
Fixing the App (5:10)
Vuex Namespaces (2:46)
Automatic Module Registration (5:58)
Dynamically Registering Modules (3:24)
Perceived Performance (7:17)
Dynamic Route Imports (6:32)
Chunk Names (2:48)
Progress Bar (5:45)
Code Coverage (4:25)
Master Project: Deployment + Production
Deploying an App with Vercel (11:59)
Sharing Your Project
Master Project: Testing Your Vue App
Introduction to Testing (12:14)
Introduction to Jest (4:35)
Writing Our First Test (8:57)
Mounting with Vue Test Utils (6:53)
Testing the Inner Content (4:22)
Passing Data to Components (5:16)
Stubbing Components (4:54)
Avoid Boolean Assertions (1:38)
Testing Children Components (6:41)
Mocking Firebase (6:30)
Mocking Methods (5:43)
Testing Attributes (6:41)
Testing Vuex Mutations (6:37)
Testing Vuex Actions (6:46)
Mocking Promises (3:46)
Testing Vuex Getters (2:44)
Testing Router Components (6:37)
Snapshot Testing (12:35)
E2E Testing Overview (10:02)
Writing an E2E Test (12:18)
Composition API
The Composition API (6:00)
Mixins (10:26)
Reactive References (7:11)
The Reactive Function (7:09)
Watchers and Computed Properties (7:52)
Lifecycle Functions (3:07)
Props (6:09)
Template Refs (4:38)
Emitting Events (1:54)
Advantages of the Composition API (12:12)
Router Hooks (7:46)
Vuex Hooks (7:41)
Verifying Reactivity (3:08)
Component Design Patterns
Section Overview (1:13)
Controlled Components (18:07)
Separation of Concerns (4:55)
Third-Party Libraries as Controlled Components (14:10)
Moving Beyond Vue’s Event System (11:29)
Encapsulating Scrolling (8:35)
The Teleport Component (12:35)
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
Coding Challenges
Endorsements On LinkedIn
Become a ZTM Ambassador ➡ Refer new students. Earn cash.
Appendix: Extra Bits
Quick Note: Upcoming Videos
For WINDOWS Users ONLY
Using The Terminal/Command Prompt (10:05)
Running script.js In Node (3:05)
Modules In Node (4:22)
ES6 Modules??
ES6 Modules In Node (8:59)
Types of Modules (5:10)
Fallback Upload
Lecture content locked. Exclusive for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures