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://v3.vuejs.org/guide/installation.html
Vue Dev Tools
● Vue Dev Tools Installation - https://v3.vuejs.org/guide/installation.html#vue-devtools
Binding Attributes
● section-2-9-COMPLETE.zip
Listening to Events
● section-2-11-COMPLETE.zip
Event Modifiers
● Events - https://v3.vuejs.org/guide/events.html
Keyboard Events and Modifiers
● Key Modifiers - https://v3.vuejs.org/guide/events.html#key-modifiers
● Keycode - https://keycode.info/
Computed Properties
● Computed Properties - https://v3.vuejs.org/guide/computed.html
Watchers
● section-2-17-COMPLETE.zip
Binding Classes
● section-2-18-STARTER.zip
Binding Styles
● Classes and Stylings - https://v3.vuejs.org/guide/class-and-style.html
● section-2-19- COMPLETE.zip
Conditional Rendering
● section-2-20-STARTER.zip
The v-show Directive
● Conditional Rendering - https://v3.vuejs.org/guide/conditional.html
● section-2-21-COMPLETE.zip
List Rendering
● section-2-22-STARTER.zip
● List Rendering - https://v3.vuejs.org/guide/list.html#list-rendering
Understanding the role of the key attribute
● section-2-23-STARTER.zip
● section-2-23-COMPLETE.zip
● Maintaining State - https://v3.vuejs.org/guide/list.html#maintaining-state

Project 1: Perspective Playground

Creating a Perspective Playground
● section-3-1-STARTER.zip
Copying to the Clipboard
● section-3-2-COMPLETE.zip

Vue: Beyond the Fundamentals

Mounting the Vue Instance
● section-4-1-STARTER.zip
Using Lifecycle Hooks
● Vue Lifecycle - https://v3.vuejs.org/guide/instance.html#lifecycle-hooks
● 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://v3.vuejs.org/guide/installation.html#explanation-of-different-builds
● CDN JS - https://cdnjs.com/libraries/vue
Introduction to Components
● section-4-7-COMPLETE.zip

Vue Developer Environment

Installing Webpack
● section-5-2-STARTER.zip
● Webpack - https://webpack.js.org/
Installing Babel
● Babel - https://babeljs.io/
● Babel Presets - https://babeljs.io/docs/en/presets
Installing Sass
● Sass - https://sass-lang.com/
Bundling CSS
● Mini CSS Extract Plugin - https://github.com/webpack-contrib/mini-css-extract-plugin
Sass Basics
● Sass Color Functions - https://sass-lang.com/documentation/modules/color
PostCSS
● PostCSS - https://github.com/postcss/postcss
● PostCSS Parts - https://www.postcss.parts/
● section-5-9-COMPLETE.zip
Understanding Linting
● ESLint - https://eslint.org/
Installing ESLint
● Configuring ESLint - https://eslint.org/docs/user-guide/configuring/
Advanced Vue Components
Installing the Vue CLI
● Vue CLI - https://cli.vuejs.org/
Reviewing the Files
● Vue Babel Plugin - https://www.npmjs.com/package/@vue/babel-preset-app
Component Styles
● Scoped CSS - https://vue-loader.vuejs.org/guide/scoped-css.html#scoped-css
Using Sass in Components
● Vue CLI CSS - https://cli.vuejs.org/guide/css.html
Validating Props
● Type Checks - https://v3.vuejs.org/guide/component-props.html#type-checks
Callback Functions
● section-6-13-COMPLETE.zip
Named Slots
● Slots - https://v3.vuejs.org/guide/component-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://v3.vuejs.org/guide/transitions-overview.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://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
● section-8-1-STARTER.zip
Finishing Touches
● section-8-4-COMPLETE.zip

Master Project: Introduction to Vuex

Installing Yarn
● Yarn - https://classic.yarnpkg.com/lang/en/
Reviewing the UI and Files
● Browserslist - https://github.com/browserslist/browserslist
● EditorConfig - https://editorconfig.org/
● Style Guide - https://v3.vuejs.org/style-guide/
Adding the Template
● music-template.zip
What is Tailwind?
● TailwindCSS - https://tailwindcss.com/
● PurgeCSS - https://purgecss.com/
Installing Tailwind
● Tailwind Configuration - https://tailwindcss.com/docs/configuration
Loading Assets
● Static Assets Handling -
https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Splitting the Template into Components
● Component Names Style Guide -
https://v3.vuejs.org/style-guide/#component-files-strongly-recommended
Adding Tabs
● music-9-22-COMPLETED.zip
Master Project: Form Validation
Setting up Form Validation
● Form Validation - https://vuejs.org/v2/cookbook/form-validation.html
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-validate/rules
Validating the Form
● music-10-11-COMPLETED.zip
Sidebar: Slot Properties
● section-10-12-STARTER.zip
● Scoped Slots - https://v3.vuejs.org/guide/component-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
Handling the Response
● Authentication SDK - https://firebase.google.com/docs/reference/js/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/firebase.auth.Auth.html#createuserwithem
ailandpassword
Setting up the Login
● signInWithEmailAndPassword() Function -
https://firebase.google.com/docs/reference/js/firebase.auth.Auth.html#signinwithemailan
dpassword
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://next.router.vuejs.org/
History Mode
● History API - https://developer.mozilla.org/en-US/docs/Web/API/History_API
● History Mode - https://next.router.vuejs.org/guide/essentials/history-mode.html
Tailwind Styles for Active Links
● AP Reference - https://next.router.vuejs.org/api/
Guarding Routes
● Navigation Guards - https://next.router.vuejs.org/guide/advanced/navigation-guards.html
Route Meta Fields
● Route Meta Fields - https://next.router.vuejs.org/guide/advanced/meta.html

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
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
Canceling Uploads with Refs
● music-13-14-COMPLETED.zip
One More thing about References
● section-13-15-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-25-COMPLETED.zip

Master Project: Playing Music

Path Parameters
● Dynamic Route Matchmaking -
https://next.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: Internationalization

Introduction to I18N
● Vue I18N - https://vue-i18n-next.intlify.dev/
● Language Codes - https://www.science.co.il/language/Locale-codes.php
Formatting and Pluralization
● Pluralization - https://vue-i18n-next.intlify.dev/guide/essentials/pluralization.html
Number Localizations
● Number Localization- https://vue-i18n-next.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-next.intlify.dev/guide/advanced/component.html

Master Project: PWA

The Manifest File
● Install Criteria - https://web.dev/install-criteria/
Configuring the Manifest File
● Vue CLI PWA Plugin - https://cli.vuejs.org/core-plugins/pwa.html
Workbox
● Workbox - https://developers.google.com/web/tools/workbox
Firebase Data Persistence
● Enable Persistence -
https://firebase.google.com/docs/reference/js/firebase.firestore.Firestore#enablepersiste
nce
Handling Offline Uploads
● music-17-8-COMPLETED.zip
Master Project: Performance Optimizations
Auto-Registering Global Components
● Lodash - https://lodash.com/
Progress Bar
● N Progress - https://ricostacruz.com/nprogress/
Code Coverage
● music-18-12-COMPLETED.zip

Master Project: Deployment + Production

Deploying an App with Vercel
● Vercel - https://vercel.com/

Master Project: Testing Your Vue App

Introduction to Jest
● Jest - https://jestjs.io/
● Mocha - https://mochajs.org/
● Jasmine - https://jasmine.github.io/
Writing our First Test
● Vue Jest - https://github.com/vuejs/vue-jest
● Vue CLI Jest Plugin - https://cli.vuejs.org/core-plugins/unit-jest.html
● expect() Function - https://jestjs.io/docs/expect
Testing the Inner Content
● Wrapper Methods - https://next.vue-test-utils.vuejs.org/api/#wrapper-methods
E2E Testing Overview
● Cypress - https://www.cypress.io/
● Cypress CLI Plugin - https://cli.vuejs.org/core-plugins/e2e-cypress.html
Writing an E2E Test
● music-20-20-COMPLETED.zip
Composition API
Mixins
● section-21-2-STARTER.zip
Reactive References
● section-21-3-STARTER.zip
Advantages of the Composition API
● section-21-10-COMPLETE.zip
Router Hooks
● section-21-11-STARTER.zip
Vuex Hooks
● section-21-12-COMPLETE.zip
Verifying Reactivity
● section-21-13-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