Complete Vue Mastery Course Guide

For more courses, resources and workshop, visit [Link]

Vue Fundamentals
Getting Started
● [Link]
● [Link]
● Vue Installation - [Link]
Vue Dev Tools
● Vue Dev Tools Installation -
[Link]
Binding Attributes
● [Link]
Listening to Events
● [Link]
Event Modifiers
● Event Modifiers - [Link]
Keyboard Events and Modifiers
● Key Modifiers - [Link]
● Keycode - [Link]
Computed Properties
● Computed Properties - [Link]
Watchers
● [Link]
Binding Classes
 ● [Link]
Binding Styles
● Classes and Stylings - [Link]
● section-2-19- [Link]
Conditional Rendering
● [Link]
The v-show Directive
● Conditional Rendering - [Link]
● [Link]
List Rendering
● [Link]
● List Rendering - [Link]
Understanding the role of the key attribute
● [Link]
● [Link]
● Maintaining State -[Link]

Project 1: Perspective Playground

Creating a Perspective Playground
● [Link]
Copying to the Clipboard
● Clipboard API - [Link]
● [Link]

Vue: Beyond the Fundamentals

Mounting the Vue Instance
● [Link]
Using Lifecycle Hooks
● Vue Lifecycle - [Link]
● [Link]
Understanding Reactivity with Proxies
● Codepen - [Link]
 ● Proxy Object -
[Link]
xy
The Vue Compiler
● Vue Builds - [Link]
● CDN JS - [Link]
Introduction to Components
● [Link]

Vue Developer Environment

Understanding Sass
● SASS - [Link]
● Sass Color Functions - [Link]
PostCSS
● PostCSS Parts - [Link]
Installing ESLint
● ESLint - [Link]
Configuring ESLint
● ESLint Rules - [Link]
● [Link]
Webpack
● [Link]
● [Link]

Advanced Vue Components

Scaffolding a Vue Project
● Create Vue - [Link]
Component Styles
● Scoped CSS - [Link]
Validating Props
● Type Checks - [Link]
Callback Functions
● [Link]
Named Slots
 ● Slots - [Link]
● [Link]
Dynamic Components
● [Link]

Transitions & Animations

Animating with CSS Transitions
● [Link]
Fine-tuning Animations
● Transitions - [Link]
JavaScript Zoom Animation
● Web Animation API -
[Link]
b_Animations_API
Transition CSS Class Names
● [Link] - [Link]
● [Link] CDN - [Link]
● [Link]

Project 2: Vue Quiz App

Setting up the Quiz Application
● Static Assets Handling - [Link]
● [Link]
Finishing Touches
● [Link]

Master Project: Introduction to Pinia

Reviewing the Files
● Style Guide - [Link]
Adding the Template
● [Link]
What is Tailwind?
● TailwindCSS - [Link]
● PurgeCSS - [Link]
Installing Tailwind
● Tailwind Installation - [Link]
Splitting the Template into Components
● Component Name Style Guide -
[Link]
Adding Tabs
● [Link]

Master Project: Form Validation

Setting up Form Validation
● Vuelidate - [Link]
● Vee Validate - [Link]
Validation Components
● The Field Component - [Link]
Defining Rules
● Vee Validate Rules -
[Link]
Sidebar: Slot Properties
● [Link]
● [Link]
● Scoped Slots - [Link]
Custom Error Messages
● Global Message Generator -
[Link]
Showing Alerts
● How we spent 30k USD in Firebase in less than 72 hours -
[Link]
bd24d
Setting up the Login Form
● [Link]
Master Project: Authentication
Understanding Authentication
● Firebase - [Link]
Reviewing the Rules
● Firebase Rules - [Link]
Setting up the Firebase SDK
● Firebase Web Setup - [Link]
User Registration
● Firebase Auth - [Link]
Handling the Response
● Authentication SDK - [Link]
Understanding Authentication
● Firebase Request Auth -
[Link]
Connecting the User with their Data
● createUserWithEmailAndPassword() Function -
[Link]
andpassword
Setting up the Login
● signInWithEmailAndPassword() Function -
[Link]
assword
JSON Web Tokens
● JWT - [Link]
● Base64Decode - [Link]
● [Link]

Master Project: Routing

Understanding Routing
● Vue Router - [Link]
Reviewing the Router Configuration
● Env Variables - [Link]
History Mode
● History API - [Link]
● History Mode - [Link]
Tailwind Styles for Active Links
● AP Reference - [Link]
Guarding Routes
● Navigation Guard - [Link]
Route Meta Fields
● Route Meta Fields - [Link]
● [Link]

Master Project: Uploading Files

Handling the File
● HTML5 Audio -
[Link]
Firebase Rules and Validation
● Firebase Secure Files - [Link]
Adding the Progress Bar
● Upload Files - [Link]
Improving the Progress Bar
● Font Awesome - [Link]
● Tailwind Text Color - [Link]
Handling Errors and Successful Uploads
● Error Codes - [Link]
Storing the File Data in the Database
● File Metadata - [Link]
Fallback Upload
● Drag and Drop Support - [Link]
One More thing about References
● [Link]
Deleting a Song from the Storage/Database
● Delete Files - [Link]
● Security Rules -
[Link]
Router Leave Guards
● [Link]

Master Project: Playing Music

Path Parameters
● Dynamic Route Matchmaking -
[Link]
Updating the Comment Count
● No PlusPlus -[Link]
Storing the Song in the State
● Howlerjs - [Link]
Toggling Audio
● Howler Documentation - [Link]
Route Transitions
● [Link]

Master Project: Directives

Registering a Directive Locally
● [Link]

Master Project: Internationalization

Introduction to I18N
● Vue I18N - [Link]
● Language Codes - [Link]
Formatting and Pluralization
● Pluralization - [Link]
Number Localizations
● Number Localization - [Link]
● Number Format -
[Link]
NumberFormat
Translating HTML with Component Interpolation
● Component Interpolation - [Link]
Exercise: Translating the Rest of the App
● [Link]
Master Project: PWA
The Manifest File
● Install Criteria - [Link]
Configuring the Manifest File
● PWA Plugin Manifest File -
[Link]
st
● Manifest File - [Link]
Offline Support with Service Workers
● Workbox - [Link]
Firebase Data Persistence
● Enable Persistence -
[Link]
stence
Handling Offline Uploads
● [Link]

Master Project: Performance Optimizations

Auto-Registering Global Components
● Lodash - [Link]
Progress Bar
● N Progress - [Link]
Rollup Visualizer
● Rollup Plugin Visualizer - [Link]
● [Link]

Master Project: Deployment + Production

Deploying an App with Vercel
● Vercel - [Link]
Master Project: Testing Your Vue App
Introduction to Vitest
● Jest - [Link]
● Mocha - [Link]
● Jasmine - [Link]
Writing our First Test
● expect() Function - [Link]
Testing the Inner Content
● Wrapper Methods - [Link]
E2E Testing Overview
● Cypress - [Link]
Writing an E2E Test
● [Link]

Composition API
Mixins
● Mixins - [Link]
● [Link]
Reactive References
● refs() vs reactive() -
[Link]
● [Link]
Advantages of the Composition API
● [Link]
Router Hooks
● [Link]
Pinia Hooks
● [Link]
The setup Attribute
● [Link]
Component Design Patterns
Controlled Components
● [Link]
Separation of Concerns
● [Link]
Third-party Libraries as Controlled Components
● [Link]
● [Link]
● Emoji Button - [Link]
● Emoji Button API Docs - [Link]
Moving Beyond Vue’s Event System
● [Link]
Encapsulating Scrolling
● Lipsum - [Link]
The Teleport Component
● [Link]

For more courses, resources and workshop, visit [Link]