Complete Vue Mastery Course Guide

For more courses, resources and workshop, visit https://zerotomastery.io

Vue Fundamentals
Getting Started
● section-2-1-STARTER.zip
● section-2-1-COMPLETE.zip
● Vue Installation - https://vuejs.org/guide/quick-start.html#without-build-tools
Vue Dev Tools
● Vue Dev Tools Installation -
https://vuejs.org/guide/scaling-up/tooling.html#browser-devtools
Binding Attributes
● section-2-9-COMPLETE.zip
Listening to Events
● section-2-11-COMPLETE.zip
Event Modifiers
● Event Modifiers - https://vuejs.org/guide/essentials/event-handling.html#event-modifiers
Keyboard Events and Modifiers
● Key Modifiers - https://vuejs.org/guide/essentials/event-handling.html#key-modifiers
● Keycode - https://keycode.info/
Computed Properties
● Computed Properties - https://vuejs.org/guide/essentials/computed.html
Watchers
● section-2-17-COMPLETE.zip
Binding Classes
 ● section-2-18-STARTER.zip
Binding Styles
● Classes and Stylings - https://vuejs.org/guide/essentials/class-and-style.html
● section-2-19- COMPLETE.zip
Conditional Rendering
● section-2-20-STARTER.zip
The v-show Directive
● Conditional Rendering - https://vuejs.org/guide/essentials/conditional.html
● section-2-21-COMPLETE.zip
List Rendering
● section-2-22-STARTER.zip
● List Rendering - https://vuejs.org/guide/essentials/list.html#list-rendering
Understanding the role of the key attribute
● section-2-23-STARTER.zip
● section-2-23-COMPLETE.zip
● Maintaining State -https://vuejs.org/guide/essentials/list.html#maintaining-state-with-key

Project 1: Perspective Playground

Creating a Perspective Playground
● section-3-1-STARTER.zip
Copying to the Clipboard
● Clipboard API - https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
● section-3-2-COMPLETE.zip

Vue: Beyond the Fundamentals

Mounting the Vue Instance
● section-4-1-STARTER.zip
Using Lifecycle Hooks
● Vue Lifecycle - https://vuejs.org/guide/essentials/lifecycle.html
● section-4-3-COMPLETE.zip
Understanding Reactivity with Proxies
● Codepen - https://codepen.io/
 ● Proxy Object -
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Pro
xy
The Vue Compiler
● Vue Builds - https://github.com/vuejs/core/tree/main/packages/vue#which-dist-file-to-use
● CDN JS - https://cdnjs.com/libraries/vue/3.2.37
Introduction to Components
● section-4-7-COMPLETE.zip

Vue Developer Environment

Understanding Sass
● SASS - https://sass-lang.com/
● Sass Color Functions - https://sass-lang.com/documentation/modules/color
PostCSS
● PostCSS Parts - https://www.postcss.parts/
Installing ESLint
● ESLint - https://eslint.org/
Configuring ESLint
● ESLint Rules - https://eslint.org/docs/latest/rules/
● section-5-7-COMPLETE.zip
Webpack
● webpack-example.zip
● section-5-8-COMPLETE.zip

Advanced Vue Components

Scaffolding a Vue Project
● Create Vue - https://github.com/vuejs/create-vue
Component Styles
● Scoped CSS - https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-css
Validating Props
● Type Checks - https://vuejs.org/guide/components/props.html#prop-validation
Callback Functions
● section-6-13-COMPLETE.zip
Named Slots
 ● Slots - https://vuejs.org/guide/components/slots.html
● section-6-15-COMPLETE.zip
Dynamic Components
● section-6-16-COMPLETE.zip

Transitions & Animations

Animating with CSS Transitions
● section-7-1-STARTER.zip
Fine-tuning Animations
● Transitions - https://vuejs.org/guide/built-ins/transition.html
JavaScript Zoom Animation
● Web Animation API -
https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Using_the_We
b_Animations_API
Transition CSS Class Names
● Animate.css - https://animate.style/
● Animate.css CDN - https://cdnjs.com/libraries/animate.css
● section-7-9-COMPLETE.zip

Project 2: Vue Quiz App

Setting up the Quiz Application
● Static Assets Handling - https://vitejs.dev/guide/assets.html
● section-8-1-STARTER.zip
Finishing Touches
● section-8-4-COMPLETE.zip

Master Project: Introduction to Pinia

Reviewing the Files
● Style Guide - https://vuejs.org/style-guide/
Adding the Template
● music-template.zip
What is Tailwind?
● TailwindCSS - https://tailwindcss.com/
● PurgeCSS - https://purgecss.com/
Installing Tailwind
● Tailwind Installation - https://tailwindcss.com/docs/guides/vite
Splitting the Template into Components
● Component Name Style Guide -
https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names
Adding Tabs
● music-9-22-COMPLETED.zip

Master Project: Form Validation

Setting up Form Validation
● Vuelidate - https://vuelidate-next.netlify.app/
● Vee Validate - https://vee-validate.logaretm.com/v4/
Validation Components
● The Field Component - https://vee-validate.logaretm.com/v4/api/field
Defining Rules
● Vee Validate Rules -
https://vee-validate.logaretm.com/v4/guide/global-validators#vee-validaterules
Sidebar: Slot Properties
● section-10-12-STARTER.zip
● section-10-12-COMPLETE.zip
● Scoped Slots - https://vuejs.org/guide/components/slots.html#scoped-slots
Custom Error Messages
● Global Message Generator -
https://vee-validate.logaretm.com/v4/guide/i18n#global-message-generator
Showing Alerts
● How we spent 30k USD in Firebase in less than 72 hours -
https://hackernoon.com/how-we-spent-30k-usd-in-firebase-in-less-than-72-hours-307490
bd24d
Setting up the Login Form
● music-10-18-COMPLETED.zip
Master Project: Authentication
Understanding Authentication
● Firebase - https://firebase.google.com/
Reviewing the Rules
● Firebase Rules - https://firebase.google.com/docs/rules
Setting up the Firebase SDK
● Firebase Web Setup - https://firebase.google.com/docs/web/setup
User Registration
● Firebase Auth - https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth
Handling the Response
● Authentication SDK - https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth
Understanding Authentication
● Firebase Request Auth -
https://firebase.google.com/docs/reference/rules/rules.firestore.Request#auth
Connecting the User with their Data
● createUserWithEmailAndPassword() Function -
https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#createuserwithemail
andpassword
Setting up the Login
● signInWithEmailAndPassword() Function -
https://firebase.google.com/docs/reference/js/v8/firebase.auth.Auth#signinwithemailandp
assword
JSON Web Tokens
● JWT - https://jwt.io/
● Base64Decode - https://www.base64decode.org/
● music-11-17-COMPLETED.zip

Master Project: Routing

Understanding Routing
● Vue Router - https://router.vuejs.org/
Reviewing the Router Configuration
● Env Variables - https://vitejs.dev/guide/env-and-mode.html
History Mode
● History API - https://developer.mozilla.org/en-US/docs/Web/API/History_API
● History Mode - https://router.vuejs.org/guide/essentials/history-mode.html
Tailwind Styles for Active Links
● AP Reference - https://router.vuejs.org/api/
Guarding Routes
● Navigation Guard - https://router.vuejs.org/guide/advanced/navigation-guards.html
Route Meta Fields
● Route Meta Fields - https://router.vuejs.org/guide/advanced/meta.html
● music-12-15-COMPLETED.zip

Master Project: Uploading Files

Handling the File
● HTML5 Audio -
https://en.wikipedia.org/wiki/HTML5_audio#Supported_audio_coding_formats
Firebase Rules and Validation
● Firebase Secure Files - https://firebase.google.com/docs/storage/security/core-syntax
Adding the Progress Bar
● Upload Files - https://firebase.google.com/docs/storage/web/upload-files
Improving the Progress Bar
● Font Awesome - https://fontawesome.com/
● Tailwind Text Color - https://tailwindcss.com/docs/text-color
Handling Errors and Successful Uploads
● Error Codes - https://firebase.google.com/docs/storage/web/handle-errors
Storing the File Data in the Database
● File Metadata - https://firebase.google.com/docs/storage/web/file-metadata
Fallback Upload
● Drag and Drop Support - https://caniuse.com/dragndrop
One More thing about References
● section-13-16-STARTER.zip
Deleting a Song from the Storage/Database
● Delete Files - https://firebase.google.com/docs/storage/web/delete-files
● Security Rules -
https://firebase.google.com/docs/firestore/security/rules-structure#granular_operations
Router Leave Guards
● music-13-26-COMPLETED.zip

Master Project: Playing Music

Path Parameters
● Dynamic Route Matchmaking -
https://router.vuejs.org/guide/essentials/dynamic-matching.html
Updating the Comment Count
● No PlusPlus -https://eslint.org/docs/rules/no-plusplus
Storing the Song in the State
● Howlerjs - https://howlerjs.com/
Toggling Audio
● Howler Documentation - https://github.com/goldfire/howler.js#documentation
Route Transitions
● music-14-22-COMPLETED.zip

Master Project: Directives

Registering a Directive Locally
● music-15-5-COMPLETED.zip

Master Project: Internationalization

Introduction to I18N
● Vue I18N - https://vue-i18n.intlify.dev/guide/
● Language Codes - https://www.science.co.il/language/Locale-codes.php
Formatting and Pluralization
● Pluralization - https://vue-i18n.intlify.dev/guide/essentials/pluralization.html
Number Localizations
● Number Localization - https://vue-i18n.intlify.dev/guide/essentials/number.html
● Number Format -
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/
NumberFormat
Translating HTML with Component Interpolation
● Component Interpolation - https://vue-i18n.intlify.dev/guide/advanced/component.html
Exercise: Translating the Rest of the App
● music-16-7-COMPLETED.zip
Master Project: PWA
The Manifest File
● Install Criteria - https://web.dev/install-criteria/
Configuring the Manifest File
● PWA Plugin Manifest File -
https://vite-plugin-pwa.netlify.app/guide/pwa-minimal-requirements.html#web-app-manife
st
● Manifest File - https://developer.mozilla.org/en-US/docs/Web/Manifest
Offline Support with Service Workers
● Workbox - https://developer.chrome.com/docs/workbox/
Firebase Data Persistence
● Enable Persistence -
https://firebase.google.com/docs/reference/js/v8/firebase.firestore.Firestore#enablepersi
stence
Handling Offline Uploads
● music-17-9-COMPLETED.zip

Master Project: Performance Optimizations

Auto-Registering Global Components
● Lodash - https://lodash.com/
Progress Bar
● N Progress - https://ricostacruz.com/nprogress/
Rollup Visualizer
● Rollup Plugin Visualizer - https://github.com/btd/rollup-plugin-visualizer
● music-18-7-COMPLETED.zip

Master Project: Deployment + Production

Deploying an App with Vercel
● Vercel - https://vercel.com/
Master Project: Testing Your Vue App
Introduction to Vitest
● Jest - https://jestjs.io/
● Mocha - https://mochajs.org/
● Jasmine - https://jasmine.github.io/
Writing our First Test
● expect() Function - https://vitest.dev/api/#expect
Testing the Inner Content
● Wrapper Methods - https://test-utils.vuejs.org/api/#wrapper-methods
E2E Testing Overview
● Cypress - https://www.cypress.io/
Writing an E2E Test
● music-20-18-COMPLETED.zip

Composition API
Mixins
● Mixins - https://vuejs.org/api/options-composition.html#mixins
● section-21-2-STARTER.zip
Reactive References
● refs() vs reactive() -
https://vuejs.org/guide/extras/reactivity-transform.html#refs-vs-reactive-variables
● section-21-3-STARTER.zip
Advantages of the Composition API
● section-21-10-COMPLETE.zip
Router Hooks
● section-21-11-STARTER.zip
Pinia Hooks
● section-21-12-COMPLETE.zip
The setup Attribute
● section-21-14-COMPLETE.zip
Component Design Patterns
Controlled Components
● section-22-2-STARTER.zip
Separation of Concerns
● section-22-3-COMPLETE.zip
Third-party Libraries as Controlled Components
● section-22-4-STARTER.zip
● section-22-4-COMPLETE.zip
● Emoji Button - https://emoji-button.js.org/
● Emoji Button API Docs - https://emoji-button.js.org/docs/api/
Moving Beyond Vue’s Event System
● section-22-5-STARTER.zip
Encapsulating Scrolling
● Lipsum - https://www.lipsum.com/
The Teleport Component
● section-22-7-COMPLETE.zip

For more courses, resources and workshop, visit https://zerotomastery.io