Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Complete Vue Developer in 2024: 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
Understanding Your Video Player (notes, video speed, subtitles + more)
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
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)
Passing on Data with Events
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