Autoplay
Autocomplete
Previous Lecture
Complete and Continue
Complete Vue Mastery 2022 (Pinia, Composition API, Vitest)
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
Vue Dev Tools
Working with Data
Multiple Vue Instances
Accessing the Instance Data
Methods (4:40)
Directives (5:07)
Two-way data binding (7:13)
Binding Attributes (2:38)
Outputting Raw HTML (6:00)
Listening to Events
Passing on Data with Events (2:33)
Event Modifiers (2:31)
Keyboard Events and Modifiers (4:54)
v-model Modifiers (5:19)
Computed Properties
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
Extra Exercise: Copy Button
Vue: Beyond the Fundamentals
Mounting the Vue Instance (4:18)
Understanding Lifecycle Hooks (4:40)
Using Lifecycle Hooks
Virtual DOM (7:21)
Understanding Reactivity with Proxies (7:33)
The Vue Compiler
Introduction to Components
Vue Developer Environment
Overview
Optional Videos In Appendix
Introduction to Vite
Exploring Vite
Understanding SASS
PostCSS
Installing ESLint
Configuring ESLint
Webpack
Conclusion
Advanced Vue Components
Scaffolding a Vue Project
Sidebar: Understanding Servers
Reviewing the Files
Creating Components
Child Components
Component Styles
Using SASS in Components
Communicating Between Components (2:21)
Props (6:13)
The Limitations of Props
Emitting Events (8:34)
Validating Props (7:35)
Callback Functions (4:58)
Inserting Content with Slots
Named Slots (7:07)
Dynamic Components
Transitions & Animations
Animating with CSS Transitions
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
Project 2: Vue Quiz App
Setting up the Quiz Application
Rendering the Questions
Moving between Questions (10:44)
Finishing Touches
Master Project: Introduction to Pinia
The Next Step (1:31)
Creating a New Project
Reviewing the Files
Formatting with ESLint and Prettier
Adding the Template
What is Tailwind? (5:36)
Installing Tailwind
Practicing with Tailwind
Loading Assets
Understanding State
Reviewing the Pinia Configuration
Splitting the Template into Components
Disabling Vue’s Rules
Working with State
Alternative Mapping Functions
Understanding Getters
Using Getters
Closing the Modal
Aliases
Adding Tabs
Exercise: Imposter Syndrome (2:55)
Master Project: Form Validation
Setting up Form Validation
Registering a Plugin
Validation Components (5:31)
Defining Rules
Applying Rules
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
Sidebar: Slot Properties
Rendering Multiple Error Messages
Default Values (1:53)
Custom Error Messages
Validation Triggers (3:58)
Showing Alerts
Setting up the Login Form
Master Project: Authentication
Understanding Authentication (6:23)
Reviewing the Rules
Setting up the Firebase SDK
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
Logging the user in after Signup
Understanding Actions
Using Actions
Connecting the User with their Data
Initializing Firebase First
Persisting the User Authentication
Setting up the Login
Signing Out
Sidebar: JSON Web Tokens (9:10)
Master Project: Routing
Understanding Routing (4:45)
Reviewing the Router Configuration
Creating Routes
History Mode
Navigating with Links
Custom Links
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
Redirecting after Logging Out
Route Meta Fields
Master Project: Uploading Files
Preparing the Upload Component
Handling Drag and Drop Events (8:12)
Handling the File (6:34)
Enabling Firebase’s Storage Service
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
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
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
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
Playing Audio
Toggling Audio
Duration and Current Position
Formatting the Time
Player Progress Bar
Changing the Audio Position
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
Passing Values to Directives (5:21)
Directive Modifiers (5:06)
Registering a Directive Locally (4:39)
Master Project: Internationalization
Introduction to i18n
Our First Translation
Formatting and Pluralization
Number Localizations
Translating HTML with Component Interpolation
Changing Locales
Exercise: Translating the Rest of the App
Master Project: PWA (Progressive Web App)
What are Progressive Web Apps? (4:19)
The Manifest File
Generating the Manifest File
Configuring the Manifest File
Offline Support with Service Workers
Understanding Caching
Workbox
Firebase Data Persistence (4:18)
Handling Offline Uploads
Master Project: Performance Optimizations
Overview (1:54)
Auto-Registering Global Components
Perceived Performance (7:17)
Dynamic Route Imports
Progress Bar
Code Coverage
Rollup Visualizer
Master Project: Deployment + Production
Deploying an App with Vercel
Sharing Your Project
Master Project: Testing Your Vue App
Introduction to Testing (12:14)
Introduction to Vitest
Adding the Vitest UI
Writing Our First Test
Mounting with Vue Test Utils
Testing the Inner Content
Passing Data to Components
Stubbing Components
Avoid Boolean Assertions
Testing Children Components
Mocking Methods
Testing Attributes (6:41)
Testing Attributes
Testing Pinia Actions
Mocking Promises
Testing Router Components
Snapshot Testing (12:35)
E2E Testing Overview
Writing an E2E Test
Composition API
The Composition API (6:00)
Mixins
Reactive References
The Reactive Function
Watchers and Computed Properties
Lifecycle Functions (3:07)
Props (6:09)
Template Refs (4:38)
Emitting Events (1:54)
Advantages of the Composition API
Router Hooks
Pinia Hooks
Verifying Reactivity (3:08)
The Setup Attribute
Component Design Patterns
Section Overview (1:13)
Controlled Components
Separation of Concerns (4:55)
Third-Party Libraries as Controlled Components
Moving Beyond Vue’s Event System
Encapsulating Scrolling (8:35)
The Teleport Component
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)
Binding Styles
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