Complete Vue Mastery 2022 (Pinia, Composition Api, Vitest)

Ultimate guide to Vue 3 Development! Build large scale applications and deploy to production. Go from Zero To Mastery!

What you'll learn
Build enterprise level Vue applications and deploy to production
File Uploads, Testing, PWAs, Internationalization, Authentication with Vue 3
Learn to build reactive, performant, large scale applications like a senior developer
Learn the latest features with Vue 3 including Composition API, Pinia, Vue Router + more
Learn to build beautiful applications using TailwindCSS, Sass, CSS Animations and Transitions
Master the latest ecosystem of a Vue Developer from scratch
Become the top 10% VueJS Developer
Use Pinia (the new replacement for Vuex) for state management in your applications
Learn to compare tradeoffs when it comes to performance and scalability
Set up authentication and user accounts
Use Firebase to build full stack applications
Learn to lead Vue projects by making good architecture decisions and helping others on your team
Master Vue Design Patterns
Routing with Vue Router
Converting apps to Progressive Web Apps
Testing your application with Vitest, snapshot testing, and even E2E testing!
Using the latest ES6/ES7/ES8/ES9/ES10/ES11 JavaScript to write clean code
Learn why Vue is outgrowing React and Angular in developer popularity!
Requirements
Basic HTML, CSS and JavaScript knowledge
You do not need any experience with Vue or any other JS framework!
Description
Just updated with all new Vue 3 features for 2022! Join a live online community of over 800,000+ developers and a course taught by industry experts that have actually worked both in Silicon Valley and Toronto with Vue.js. Using the latest version of Vue, this course is focused on efficiency. Never spend time on confusing, out of date, incomplete tutorials anymore. Graduates of Andrei’s courses are now working at Google, Tesla, Amazon, Apple, IBM, JP Morgan, Facebook, + other top tech companies.We guarantee you this is the most comprehensive online resource on Vue. This project based course will introduce you to all of the modern toolchain of a Vue JS developer in 2022. Along the way, we will build a massive Music Player application similar to Spotify using Vue, Pinia, Vue Router, Composition API, Firebase, Vitest, Sass + more. This is going to be a full stack app, using Firebase.All code is going to be provided step by step and even if you don’t like to code along, you will get access to the the full master project code so anyone signed up for the course will have their own project to put on their portfolio right away.The curriculum is going to be very hands on as we walk you from start to finish of releasing a professional Vue project all the way into production. We will start from the very beginning by teaching you Vue basics and then going into advanced topics so you can make good decisions on architecture and tools on any of your future VueJS projects. You're going to love Vue if you are new to front end frameworks or even if you come from a React or Angular background!Here is what the course will cover:1. FUNDAMENTALS - In this section, we will learn about the fundamentals of Vue, such as computed properties, methods, and watchers. With just the fundamentals, we'll be able to manipulate the document with events, binding, and conditional rendering. We'll also learn how to debug an application with the official Vue Developer Tools.2. PROJECT: PERSPECTIVE PLAYGROUND - In this section, we'll build our first project by creating a CSS perspective playground. This will give us an opportunity to reinforce a lot of the fundamental concepts we learned in the previous section by developing a tool for visualizing how CSS properties can manipulate the perspective of an element.3. BEYOND THE FUNDAMENTALS - In this section, we'll dive into the inner workings of the Vue framework. How do JavaScript frameworks add reactivity? How does Vue compile templates into virtual DOM objects? This will give us insight into how Vue is able to deliver a framework for modern applications. We'll also talk about lifecycle hooks and components.4. LEARNING ABOUT THE TOOLS - In this section, we'll take a step back from Vue to talk about some tools for developing applications. Throughout your career, you'll need to deal with the tooling that helps us develop applications (i.e., Vite, Sass, PostCSS, ESLint). We'll talk about how these tools are configured and why they're necessary.5. ADVANCED COMPONENTS - In this section, we'll scaffold a Vue project with Vite. The goal of Vue is to make the development experience as smooth and painless as possible. Vue can help us with scaffolding a project, configuring tools, and running a server. This alleviates a lot of the more tedious tasks of web development. We'll be able to jump straight into components to see how we can architect an application with components by using props, emitting events, slots, and dynamically rendering content.6. TRANSITIONS & ANIMATIONS - In this section, we'll learn how to add some pizzaz to an app by adding transitions and animations. Animations can breathe life into any application. They can also improve user experience by giving feedback to the user about their actions. We'll discuss how animations can be achieved with CSS and JavaScript. Both are supported in Vue. We'll even talk about the latest Web Animations API.7. PROJECT: QUIZ APP - In this section, we're going to take everything we've learned thus far to develop a quiz application. Quizzes are a great way to engage users in almost any industry.8. MASTER PROJECT: INTRODUCTION TO PINIA - In this section, we'll start working on the master project for this course, which is a music application! Upload, manage and listen to music without interruption. We'll use TailwindCSS to help us with designing a beautiful modern application. It's the new kid on the block that's being embraced by the front-end dev community. Afterward, we'll learn about state management by using the official state library called PINIA (replaces Vuex in newer codebases).9. MASTER PROJECT: FORM VALIDATION - In this section, we will perform form validation to prevent invalid data from being submitted. Accidents happen. It's our job to make sure to check for mistakes. We'll learn how to enforce rules for various scenarios.10. MASTER PROJECT: AUTHENTICATION - In this section, we'll begin authentication and registration. Users will be able to login immediately after registering for an account. We'll be using Firebase as a backend solution for managing and verifying users.11. MASTER PROJECT: ROUTING - In this section, we're going to handle routing with the Vue Router library. Underneath, the router library is using the history API to handle navigation. It allows us to switch between pages without refreshing the assets. We'll look at how we can use this library to help us guard routes, add meta fields, and customize the appearance of our site based on the current route.12. MASTER PROJECT: UPLOADING FILES - In this section, we're going to start uploading files to Firebase. It's vital we validate files with Firebase. We don't want users to accidentally download a malicious file when listening to music. We'll cover how to enforce validation with Firebase rules. After doing so, we'll store additional information in a database. We'll even cover how to implement a fallback solution in case drag n drop is not available.13. MASTER PROJECT: PLAYING MUSIC - In this section, we're going to start making the audio player functional. We'll implement basic features such as playing/pausing, scrubbing and displaying the current duration. We'll make the rest of the site functional by allowing users to submit comments, browse music, and sort data.14. MASTER PROJECT: DIRECTIVES - In this section, we'll briefly learn about writing custom directives. Directives are attributes that can extend an element with additional properties and methods. We'll cover the basics and look at advanced concepts such as modifiers and arguments.15. MASTER PROJECT: INTERNATIONALIZATION - In this section, we'll add internationalization to a project for translating a project across multiple languages. There are different ways to translate a message. Some messages need formatting or pluralization. We can also translate numbers (i.e., currencies). We'll look at how to switch between languages with a few lines of code.16. MASTER PROJECT: PWA - The web has shifted to a mobile-first approach. In this section, we'll add PWA (Progressive Web App) features to make our app mobile-friendly by using Workbox to cache files and persist data with Firebase.17. MASTER PROJECT: OPTIMIZATIONS - In this section, we'll make some final optimizations before shipping our app to production. There are various techniques and tools we'll look at to help us fine-tune our app. We can use Vite to chunk files and auto-register components. We'll add some features for helping the user understand the app is processing a request for a friendly user experience.18. MASTER PROJECT: DEPLOYMENT - In this section, we'll deploy our app to Vercel with a single command! Quick and easy.19. MASTER PROJECT: TESTING - In this section, we'll discuss how to test a project with Vitest. Unit testing allows us to test a feature in isolation. It's the most common type of test you'll write. There are a few problems with testing that can be resolved with mocking. By mocking code, we'll be able to isolate features and test them. Afterward, we'll move on to snapshot testing and E2E testing to bring everything together.20. COMPOSITION API - In this section, we'll discuss the latest feature introduced in Vue called the composition API. It's a different way of building components. While Vue provides a simple API for writing components, there are some shortcomings. The composition API resolves these issues. We'll talk about why you would want to use the composition API and understand why it was introduced.This course is not about making you just code along without understanding the principles so that when you are done with the course, you don’t know what to do other than watch another tutorial. No! This course will push you and challenge you to go from an absolute beginner in Vue to someone that is in the top 10% of Vue developers. We guarantee you this is the most comprehensive online course on Vue JS! Have a look at the course outline video to see all the topics we are going to cover, all the projects we’re going to build, and all the techniques you’re going to learn to become a top Vue developer!See you inside!––––––Taught By:Andrei Neagoie is the instructor of the highest rated Development courses on Udemy as well as one of the fastest growing. His graduates have moved on to work for some of the biggest tech companies around the world like Apple, Google, Amazon, JP Morgan, IBM, UNIQLO etc… He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.   Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.   See you inside the courses!––––Luis Ramirez Jr is a software engineer with a decade of experience in web application development. He has spent his career architecting reliable, battle-tested, secure, scalable, and performant solutions. As an engineer, it's always a priority to develop applications that provide a fluid user experience.Most courses will teach you the "how," but never the "why." Luis believes that understanding core and critical programming concepts will make you a competitive engineer in today's market. He's here to assist you in this journey by demystifying low-level concepts that other instructors may gloss over.Students will walk away with the knowledge to overcome any task thrown at them with critical thinking skills and being able to effectively communicate with teammates.

Overview

Section 1: Introduction

Lecture 1 Course Outline

Lecture 2 Join Our Online Classroom!

Lecture 3 Exercise: Meet Your Classmates and Instructor

Lecture 4 Vue vs React vs Angular

Lecture 5 Composition vs. Options API

Lecture 6 Complete Course Resources + Code

Lecture 7 Optional: Vue Documentary

Lecture 8 Monthly Coding Challenges, Free Resources and Guides

Section 2: Vue Fundamentals

Lecture 9 Getting Started

Lecture 10 Vue Dev Tools

Lecture 11 Working with Data

Lecture 12 Multiple Vue Instances

Lecture 13 Accessing the Instance Data

Lecture 14 Methods

Lecture 15 Directives

Lecture 16 Two-way data binding

Lecture 17 Binding Attributes

Lecture 18 Outputting Raw HTML

Lecture 19 Listening to Events

Lecture 20 Passing on Data with Events

Lecture 21 Event Modifiers

Lecture 22 Keyboard Events and Modifiers

Lecture 23 v-model Modifiers

Lecture 24 Computed Properties

Lecture 25 Watchers

Lecture 26 Binding Classes

Lecture 27 Binding Styles

Lecture 28 Conditional Rendering

Lecture 29 The v-show Directive

Lecture 30 List Rendering

Lecture 31 Understanding the role of the key attribute

Lecture 32 Web Developer Monthly

Lecture 33 Endorsements On LinkedIN

Section 3: Project 1: Perspective Playground

Lecture 34 Creating a Perspective Playground

Lecture 35 Copying to the Clipboard

Lecture 36 Extra Exercise: Copy Button

Section 4: Vue: Beyond the Fundamentals

Lecture 37 Mounting the Vue Instance

Lecture 38 Understanding Lifecycle Hooks

Lecture 39 Using Lifecycle Hooks

Lecture 40 Virtual DOM

Lecture 41 Understanding Reactivity with Proxies

Lecture 42 The Vue Compiler

Lecture 43 Introduction to Components

Section 5: Vue Developer Environment

Lecture 44 Overview

Lecture 45 Optional Videos In Appendix

Lecture 46 Introduction to Vite

Lecture 47 Exploring Vite

Lecture 48 Understanding SASS

Lecture 49 PostCSS

Lecture 50 Installing ESLint

Lecture 51 Configuring ESLint

Lecture 52 Webpack

Lecture 53 Conclusion

Section 6: Advanced Vue Components

Lecture 54 Scaffolding a Vue Project

Lecture 55 Sidebar: Understanding Servers

Lecture 56 Reviewing the Files

Lecture 57 Creating Components

Lecture 58 Child Components

Lecture 59 Component Styles

Lecture 60 Using SASS in Components

Lecture 61 Communicating Between Components

Lecture 62 Props

Lecture 63 The Limitations of Props

Lecture 64 Emitting Events

Lecture 65 Validating Props

Lecture 66 Callback Functions

Lecture 67 Inserting content with slots

Lecture 68 Named Slots

Lecture 69 Dynamic Components

Section 7: Transitions & Animations

Lecture 70 Animating with CSS Transitions

Lecture 71 Fine-tuning Transitions

Lecture 72 Animating with CSS Animations

Lecture 73 Animating with JavaScript

Lecture 74 JavaScript Zoom Animation

Lecture 75 CSS and JavaScript Transitions

Lecture 76 Animating a List

Lecture 77 Fixing the Animation

Lecture 78 Transition CSS Class Names

Section 8: Project 2: Vue Quiz App

Lecture 79 Setting up the Quiz Application

Lecture 80 Rendering the Questions

Lecture 81 Moving between Questions

Lecture 82 Finishing Touches

Lecture 83 Exercise: Imposter Syndrome

Section 9: Master Project: Introduction to Pinia

Lecture 84 The Next Step

Lecture 85 Creating a New Project

Lecture 86 Reviewing the Files

Lecture 87 Formatting with ESLint and Prettier

Lecture 88 Adding the Template

Lecture 89 What is Tailwind?

Lecture 90 Installing Tailwind

Lecture 91 Practicing with Tailwind

Lecture 92 Loading Assets

Lecture 93 Understanding State

Lecture 94 Reviewing the Pinia Configuration

Lecture 95 Splitting the Template into Components

Lecture 96 Disabling Vue’s Rules

Lecture 97 Working with State

Lecture 98 Alternative Mapping Functions

Lecture 99 Understanding Getters

Lecture 100 Using Getters

Lecture 101 Closing the Modal

Lecture 102 Aliases

Lecture 103 Adding Tabs

Section 10: Master Project: Form Validation

Lecture 104 Setting up Form Validation

Lecture 105 Registering a Plugin

Lecture 106 Validation Components

Lecture 107 Defining Rules

Lecture 108 Applying Rules

Lecture 109 Additional Rules

Lecture 110 Validating Emails

Lecture 111 Validating Numbers

Lecture 112 Validating Passwords

Lecture 113 Dropdown and Checkbox Fields

Lecture 114 Validating the Form

Lecture 115 Sidebar: Slot Properties

Lecture 116 Rendering Multiple Error Messages

Lecture 117 Default Values

Lecture 118 Custom Error Messages

Lecture 119 Validation Triggers

Lecture 120 Showing Alerts

Lecture 121 Setting up the Login Form

Section 11: Master Project: Authentication

Lecture 122 Understanding Authentication

Lecture 123 Reviewing the Rules

Lecture 124 Setting up the Firebase SDK

Lecture 125 User Registration

Lecture 126 Handling the Response

Lecture 127 Exporting Services

Lecture 128 Storing the User Form Data

Lecture 129 Extra Exercise: Add Another Field

Lecture 130 Understanding Authentication

Lecture 131 Logging the user in after Signup

Lecture 132 Understanding Actions

Lecture 133 Using Actions

Lecture 134 Connecting the User with their Data

Lecture 135 Initializing Firebase First

Lecture 136 Persisting the User Authentication

Lecture 137 Setting up the Login

Lecture 138 Signing Out

Lecture 139 Sidebar: JSON Web Tokens

Section 12: Master Project: Routing

Lecture 140 Understanding Routing

Lecture 141 Reviewing the Router Configuration

Lecture 142 Creating Routes

Lecture 143 History Mode

Lecture 144 Navigating with Links

Lecture 145 Custom Links

Lecture 146 Tailwind Styles for Active Links

Lecture 147 Naming Routes

Lecture 148 Setting up “Catch-All” and Redirect Routes

Lecture 149 Route Alias

Lecture 150 Guarding Routes

Lecture 151 Route Specific Guards

Lecture 152 Guarding Authentication Only Routes

Lecture 153 Redirecting after Logging Out

Lecture 154 Route Meta Fields

Section 13: Master Project: Uploading Files

Lecture 155 Preparing the Upload Component

Lecture 156 Handling Drag and Drop Events

Lecture 157 Handling the File

Lecture 158 Enabling Firebase’s Storage Service

Lecture 159 Uploading Files with Firebase

Lecture 160 Firebase Rules and Validation

Lecture 161 Adding the Progress Bar

Lecture 162 Making the Progress Bar Dynamic

Lecture 163 Improving the Progress Bar

Lecture 164 Handling Errors and Successful Uploads

Lecture 165 Storing the File Data in the Database

Lecture 166 Firebase References and Snapshots

Lecture 167 Fallback Upload

Lecture 168 Canceling Uploads

Lecture 169 Cancelling Uploads with Refs

Lecture 170 One more thing about References

Lecture 171 Querying the Database

Lecture 172 Storing the List of Songs

Lecture 173 Displaying the List of Songs

Lecture 174 Prop Validation

Lecture 175 Toggling the Form

Lecture 176 Validating the Song Form

Lecture 177 Editing a Song

Lecture 178 Deleting a Song from the Storage/Database

Lecture 179 Updating the list of songs after an Upload

Lecture 180 Router Leave Guards

Section 14: Master Project: Playing Music

Lecture 181 Creating the Home Page

Lecture 182 Checking the Scroll Position

Lecture 183 Infinite Scrolling

Lecture 184 Path Parameters

Lecture 185 Creating the Song Template

Lecture 186 Validating the Comment

Lecture 187 Prepping the Form

Lecture 188 Finalizing the Comment Form

Lecture 189 Displaying the Comments

Lecture 190 Updating the Comments List

Lecture 191 Query Parameters

Lecture 192 Detecting Query Parameters

Lecture 193 Updating the Comment Count

Lecture 194 Storing the song in the State

Lecture 195 Playing Audio

Lecture 196 Toggling Audio

Lecture 197 Duration and Current Position

Lecture 198 Formatting the Time

Lecture 199 Player Progress Bar

Lecture 200 Changing the Audio Position

Lecture 201 Extra Exercise: Update the "play" Button

Lecture 202 Creating links with Hash Fragments

Lecture 203 Route Transitions

Section 15: Master Project: Directives

Lecture 204 Introduction to Directives

Lecture 205 Writing our First Directive

Lecture 206 Passing Values to Directives

Lecture 207 Directive Modifiers

Lecture 208 Registering a Directive Locally

Section 16: Master Project: Internationalization

Lecture 209 Introduction to i18n

Lecture 210 Our First Translation

Lecture 211 Formatting and Pluralization

Lecture 212 Number Localizations

Lecture 213 Translating HTML with Component Interpolation

Lecture 214 Changing Locales

Lecture 215 Exercise: Translating the Rest of the App

Section 17: Master Project: PWA (Progressive Web App)

Lecture 216 What are Progressive Web Apps?

Lecture 217 The Manifest File

Lecture 218 Generating the Manifest File

Lecture 219 Configuring the Manifest File

Lecture 220 Offline Support with Service Workers

Lecture 221 Understanding Caching

Lecture 222 Workbox

Lecture 223 Firebase Data Persistence

Lecture 224 Handling Offline Uploads

Section 18: Master Project: Performance Optimizations

Lecture 225 Overview

Lecture 226 Auto-Registering Global Components

Lecture 227 Perceived Performance

Lecture 228 Dynamic Route Imports

Lecture 229 Progress Bar

Lecture 230 Code Coverage

Lecture 231 Rollup Visualizer

Section 19: Master Project: Deployment + Production

Lecture 232 Deploying an App with Vercel

Lecture 233 Sharing Your Project

Section 20: Master Project: Testing Your Vue App

Lecture 234 Introduction to Testing

Lecture 235 Introduction to Vitest

Lecture 236 Adding the Vitest UI

Lecture 237 Writing Our First Test

Lecture 238 Mounting with Vue Test Utils

Lecture 239 Testing the Inner Content

Lecture 240 Passing Data to Components

Lecture 241 Stubbing Components

Lecture 242 Avoid Boolean Assertions

Lecture 243 Testing Children Components

Lecture 244 Mocking Methods

Lecture 245 Testing Attributes

Lecture 246 Testing Pinia Actions

Lecture 247 Mocking Promises

Lecture 248 Testing Router Components

Lecture 249 Snapshot Testing

Lecture 250 E2E Testing Overview

Lecture 251 Writing an E2E Test

Section 21: Composition API

Lecture 252 The Composition API

Lecture 253 Mixins

Lecture 254 Reactive References

Lecture 255 The Reactive Function

Lecture 256 Watchers and Computed Properties

Lecture 257 Lifecycle Functions

Lecture 258 Props

Lecture 259 Template Refs

Lecture 260 Emitting Events

Lecture 261 Advantages of the Composition API

Lecture 262 Router Hooks

Lecture 263 Pinia Hooks

Lecture 264 Verifying Reactivity

Lecture 265 The setup Attribute

Section 22: Component Design Patterns

Lecture 266 Section Overview

Lecture 267 Controlled Components

Lecture 268 Separation of Concerns

Lecture 269 Third-Party Libraries as Controlled Components

Lecture 270 Moving Beyond Vue’s Event System

Lecture 271 Encapsulating Scrolling

Lecture 272 The Teleport Component

Section 23: Where To Go From Here?

Lecture 273 Thank You!

Lecture 274 Become An Alumni

Lecture 275 Endorsements On LinkedIn

Lecture 276 Learning Guideline

Lecture 277 Coding Challenges

Section 24: Appendix: Extra Bits

Lecture 278 Quick Note: Upcoming Videos

Lecture 279 For WINDOWS Users ONLY

Lecture 280 Using The Terminal/Command Prompt

Lecture 281 Running script.js In Node

Lecture 282 Modules In Node

Lecture 283 ES6 Modules??

Lecture 284 ES6 Modules In Node

Lecture 285 Types of Modules

Section 25: BONUS SECTION

Lecture 286 Bonus Lecture

Students who are interested in going beyond a normal "beginner" tutorial,Programmers who want to learn the most in demand skill of a web developer,Developers that want to be in the top 10% of Vue Developers,Students who want to gain experience working on a scalable large application,Bootcamp or online tutorial graduates that want to go beyond the basics