You are NOT signed in as a student! Your progress will not be saved and you won't see milestones on your ZTM Passport.
Make sure you are logged into
Academy
Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete Vue Developer in 2025: Zero to Mastery (Pinia, Vitest)
Introduction
Complete Vue JS Developer: Zero to Mastery (2:25)
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
ZTM Plugin + Understanding Your Video Player
Set Your Learning Streak Goal
Vue Fundamentals
Getting Started (7:37)
Vue Dev Tools (6:01)
Working with Data (8:43)
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:06)
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:06)
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)
Let's Have Some Fun (+ Free Resources)
Project 1: Perspective Playground
Creating a Perspective Playground (11:45)
Copying to the Clipboard (4:06)
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)
Endorsements On LinkedIn
Understanding Reactivity with Proxies (7:33)
The Vue Compiler (13:02)
Introduction to Components (7:42)
Unlimited Updates
Vue Developer Environment
Overview (2:16)
Optional Videos In Appendix
Introduction to Vite (5:29)
Exploring Vite (5:46)
Understanding SASS (8:00)
PostCSS (6:37)
Installing ESLint (4:52)
Configuring ESLint (7:27)
Webpack (8:21)
Conclusion (0:46)
Course Check-In
Advanced Vue Components
Scaffolding a Vue Project (9:08)
Sidebar: Understanding Servers (5:25)
Reviewing the Files (9:29)
Creating Components (4:04)
Child Components (8:16)
Component Styles (6:29)
Using SASS in Components (2:04)
Communicating Between Components (2:21)
Props (6:13)
The Limitations of Props (3:46)
Emitting Events (8:34)
Validating Props (7:35)
Callback Functions (4:58)
Inserting Content with Slots (8:33)
Named Slots (7:07)
Dynamic Components (9:38)
Implement a New Life System
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:37)
Project 2: Vue Quiz App
Setting up the Quiz Application (5:00)
Rendering the Questions (12:04)
Moving between Questions (10:44)
Finishing Touches (11:27)
Master Project: Introduction to Pinia
The Next Step (1:31)
Creating a New Project (4:39)
Reviewing the Files (6:19)
Formatting with ESLint and Prettier (4:30)
Adding the Template (8:13)
What is Tailwind? (5:36)
Installing Tailwind (7:58)
Practicing with Tailwind (5:15)
Loading Assets (4:00)
Understanding State (5:34)
Reviewing the Pinia Configuration (6:04)
Splitting the Template into Components (5:23)
Disabling Vue’s Rules (4:53)
Working with State (6:40)
Alternative Mapping Functions (3:06)
Understanding Getters (1:31)
Using Getters (4:09)
Closing the Modal (2:05)
Aliases (3:13)
Adding Tabs (5:33)
Exercise: Imposter Syndrome (2:55)
Master Project: Form Validation
Setting up Form Validation (4:30)
Registering a Plugin (5:34)
Validation Components (5:31)
Defining Rules (3:48)
Applying Rules (5:35)
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:01)
Sidebar: Slot Properties (8:34)
Rendering Multiple Error Messages (6:22)
Default Values (1:53)
Custom Error Messages (10:34)
Validation Triggers (3:58)
Showing Alerts (8:57)
Setting up the Login Form (18:00)
Master Project: Authentication
Understanding Authentication (6:23)
Reviewing the Rules (4:50)
Setting up the Firebase SDK (7:37)
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 (6:47)
Understanding Actions (2:22)
Using Actions (7:45)
Connecting the User with their Data (8:25)
Initializing Firebase First (4:39)
Persisting the User Authentication (6:29)
Setting up the Login (6:42)
Signing Out (8:03)
Sidebar: JSON Web Tokens (9:10)
Master Project: Routing
Understanding Routing (4:45)
Reviewing the Router Configuration (5:06)
Creating Routes (7:09)
History Mode (8:47)
Navigating with Links (5:47)
Custom Links (5:21)
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 (3:20)
Redirecting after Logging Out (4:55)
Route Meta Fields (8:26)
Master Project: Uploading Files
Preparing the Upload Component (6:18)
Handling Drag and Drop Events (8:12)
Handling the File (6:34)
Enabling Firebase’s Storage Service (1:20)
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:43)
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:23)
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:27)
Playing Audio (3:33)
Toggling Audio (10:03)
Duration and Current Position (6:13)
Formatting the Time (4:32)
Player Progress Bar (8:21)
Changing the Audio Position (10:23)
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:47)
Passing Values to Directives (5:21)
Directive Modifiers (5:06)
Registering a Directive Locally (4:39)
Master Project: Internationalization
Introduction to i18n (6:01)
Our First Translation (7:07)
Formatting and Pluralization (6:40)
Number Localizations (8:39)
Translating HTML with Component Interpolation (5:56)
Changing Locales (5:41)
Exercise: Translating the Rest of the App (2:50)
Master Project: PWA (Progressive Web App)
What are Progressive Web Apps? (4:19)
The Manifest File (5:24)
Generating the Manifest File (5:35)
Configuring the Manifest File (3:30)
Offline Support with Service Workers (6:00)
Understanding Caching (3:00)
Workbox (5:16)
Firebase Data Persistence (4:18)
Handling Offline Uploads (5:35)
Master Project: Performance Optimizations
Overview (1:54)
Auto-Registering Global Components (10:38)
Perceived Performance (7:17)
Dynamic Route Imports (5:53)
Progress Bar (5:39)
Code Coverage (4:00)
Rollup Visualizer (5:02)
Master Project: Deployment + Production
Deploying an App with Vercel (11:17)
Sharing Your Project
Master Project: Testing Your Vue App
Introduction to Testing (12:14)
Introduction to Vitest (2:50)
Adding the Vitest UI (2:55)
Writing Our First Test (8:57)
Mounting with Vue Test Utils (6:39)
Testing the Inner Content (4:15)
Passing Data to Components (5:11)
Stubbing Components (4:50)
Avoid Boolean Assertions (1:37)
Testing Children Components (6:30)
Mocking Methods (5:33)
Testing Attributes (6:28)
Testing Pinia Actions (6:07)
Mocking Promises (4:14)
Testing Router Components (6:35)
Snapshot Testing (12:35)
E2E Testing Overview (6:30)
Writing an E2E Test (12:21)
Composition API
The Composition API (6:00)
Mixins (10:23)
Reactive References (7:09)
The Reactive Function (7:04)
Watchers and Computed Properties (8:03)
Lifecycle Functions (3:07)
Props (6:09)
Template Refs (4:38)
Emitting Events (1:54)
Advantages of the Composition API (11:51)
Router Hooks (7:42)
Pinia Hooks (3:03)
Verifying Reactivity (3:08)
The Setup Attribute (2:58)
Component Design Patterns
Section Overview (1:13)
Controlled Components (17:56)
Separation of Concerns (4:55)
Third-Party Libraries as Controlled Components (14:04)
Moving Beyond Vue’s Event System (11:27)
Encapsulating Scrolling (8:35)
The Teleport Component (11:55)
Where To Go From Here?
Thank You! (1:17)
Review This Course!
Become An Alumni
Learning Guideline
ZTM Events Every Month
LinkedIn Endorsements
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)
Storing the List of Songs
This lecture is available exclusively for ZTM Academy members.
If you're already a member,
you'll need to login
.
Join ZTM To Unlock All Lectures