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
● Events - [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
● [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

Installing Webpack
● [Link]
● Webpack - [Link]
Installing Babel
● Babel - [Link]
● Babel Presets - [Link]
Installing Sass
● Sass - [Link]
Bundling CSS
● Mini CSS Extract Plugin - [Link]
Sass Basics
● Sass Color Functions - [Link]
PostCSS
● PostCSS - [Link]
● PostCSS Parts - [Link]
● [Link]
Understanding Linting
● ESLint - [Link]
Installing ESLint
● Configuring ESLint - [Link]
Advanced Vue Components
Installing the Vue CLI
● Vue CLI - [Link]
Reviewing the Files
● Vue Babel Plugin - [Link]
Component Styles
● Scoped CSS - [Link]
Using Sass in Components
● Vue CLI 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 Vuex

Installing Yarn
● Yarn - [Link]
Reviewing the UI and Files
● Browserslist - [Link]
● EditorConfig - [Link]
● Style Guide - [Link]
Adding the Template
● [Link]
What is Tailwind?
● TailwindCSS - [Link]
● PurgeCSS - [Link]
Installing Tailwind
● Tailwind Configuration - [Link]
Loading Assets
● Static Assets Handling -
[Link]
Splitting the Template into Components
● Component Names Style Guide -
[Link]
Adding Tabs
● [Link]
Master Project: Form Validation
Setting up Form Validation
● Form Validation - [Link]
Validation Components
● The Field Component - [Link]
Defining Rules
● Vee Validate Rules -
[Link]
Validating the Form
● [Link]
Sidebar: Slot Properties
● [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]
Handling the Response
● Authentication SDK - [Link]
Understanding Authentication
● Firebase Request Auth -
[Link]
Connecting the User with their Data
● createUserWithEmailAndPassword() Function -
[Link]
ailandpassword
Setting up the Login
● signInWithEmailAndPassword() Function -
[Link]
dpassword
JSON Web Tokens
● JWT - [Link]
● Base64Decode - [Link]
● [Link]

Master Project: Routing

Understanding Routing
● Vue Router - [Link]
History Mode
● History API - [Link]
● History Mode - [Link]
Tailwind Styles for Active Links
● AP Reference - [Link]
Guarding Routes
● Navigation Guards - [Link]
Route Meta Fields
● Route Meta Fields - [Link]

Master Project: Uploading Files

Handling the File
 ● HTML5 Audio -
[Link]
Firebase Rules and Validation
● Firebase Secure 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]
Canceling Uploads with Refs
● [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: 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]

Master Project: PWA

The Manifest File
● Install Criteria - [Link]
Configuring the Manifest File
● Vue CLI PWA Plugin - [Link]
Workbox
● Workbox - [Link]
Firebase Data Persistence
● Enable Persistence -
[Link]
nce
Handling Offline Uploads
● [Link]
Master Project: Performance Optimizations
Auto-Registering Global Components
● Lodash - [Link]
Progress Bar
● N Progress - [Link]
Code Coverage
● [Link]

Master Project: Deployment + Production

Deploying an App with Vercel
● Vercel - [Link]

Master Project: Testing Your Vue App

Introduction to Jest
● Jest - [Link]
● Mocha - [Link]
● Jasmine - [Link]
Writing our First Test
● Vue Jest - [Link]
● Vue CLI Jest Plugin - [Link]
● expect() Function - [Link]
Testing the Inner Content
● Wrapper Methods - [Link]
E2E Testing Overview
● Cypress - [Link]
● Cypress CLI Plugin - [Link]
Writing an E2E Test
● [Link]
Composition API
Mixins
● [Link]
Reactive References
● [Link]
Advantages of the Composition API
● [Link]
Router Hooks
● [Link]
Vuex Hooks
● [Link]
Verifying Reactivity
● [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]