Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 286 lectures (27h 57m) | 7.18 GB

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

Just updated with all new Vue 3 features for 2023! Join a live online community of over 900,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 2023. 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!

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!
Table of Contents

1 Course Outline
2 Join Our Online Classroom!
3 Exercise Meet Your Classmates and Instructor
4 Vue vs React vs Angular
5 Composition vs. Options API
6 Complete Course Resources + Code
7 Optional Vue Documentary
8 Monthly Coding Challenges, Free Resources and Guides

Vue Fundamentals
9 Getting Started
10 Vue Dev Tools
11 Working with Data
12 Multiple Vue Instances
13 Accessing the Instance Data
14 Methods
15 Directives
16 Two-way data binding
17 Binding Attributes
18 Outputting Raw HTML
19 Listening to Events
20 Passing on Data with Events
21 Event Modifiers
22 Keyboard Events and Modifiers
23 v-model Modifiers
24 Computed Properties
25 Watchers
26 Binding Classes
27 Binding Styles
28 Conditional Rendering
29 The v-show Directive
30 List Rendering
31 Understanding the role of the key attribute
32 Web Developer Monthly
33 Endorsements On LinkedIN

Project 1 Perspective Playground
34 Creating a Perspective Playground
35 Copying to the Clipboard
36 Extra Exercise Copy Button

Vue Beyond the Fundamentals
37 Mounting the Vue Instance
38 Understanding Lifecycle Hooks
39 Using Lifecycle Hooks
40 Virtual DOM
41 Understanding Reactivity with Proxies
42 The Vue Compiler
43 Introduction to Components

Vue Developer Environment
44 Overview
45 Optional Videos In Appendix
46 Introduction to Vite
47 Exploring Vite
48 Understanding SASS
49 PostCSS
50 Installing ESLint
51 Configuring ESLint
52 Webpack
53 Conclusion

Advanced Vue Components
54 Scaffolding a Vue Project
55 Sidebar Understanding Servers
56 Reviewing the Files
57 Creating Components
58 Child Components
59 Component Styles
60 Using SASS in Components
61 Communicating Between Components
62 Props
63 The Limitations of Props
64 Emitting Events
65 Validating Props
66 Callback Functions
67 Inserting content with slots
68 Named Slots
69 Dynamic Components

Transitions & Animations
70 Animating with CSS Transitions
71 Fine-tuning Transitions
72 Animating with CSS Animations
73 Animating with JavaScript
74 JavaScript Zoom Animation
75 CSS and JavaScript Transitions
76 Animating a List
77 Fixing the Animation
78 Transition CSS Class Names

Project 2 Vue Quiz App
79 Setting up the Quiz Application
80 Rendering the Questions
81 Moving between Questions
82 Finishing Touches
83 Exercise Imposter Syndrome

Master Project Introduction to Pinia
84 The Next Step
85 Creating a New Project
86 Reviewing the Files
87 Formatting with ESLint and Prettier
88 Adding the Template
89 What is Tailwind
90 Installing Tailwind
91 Practicing with Tailwind
92 Loading Assets
93 Understanding State
94 Reviewing the Pinia Configuration
95 Splitting the Template into Components
96 Disabling Vues Rules
97 Working with State
98 Alternative Mapping Functions
99 Understanding Getters
100 Using Getters
101 Closing the Modal
102 Aliases
103 Adding Tabs

Master Project Form Validation
104 Setting up Form Validation
105 Registering a Plugin
106 Validation Components
107 Defining Rules
108 Applying Rules
109 Additional Rules
110 Validating Emails
111 Validating Numbers
112 Validating Passwords
113 Dropdown and Checkbox Fields
114 Validating the Form
115 Sidebar Slot Properties
116 Rendering Multiple Error Messages
117 Default Values
118 Custom Error Messages
119 Validation Triggers
120 Showing Alerts
121 Setting up the Login Form

Master Project Authentication
122 Understanding Authentication
123 Reviewing the Rules
124 Setting up the Firebase SDK
125 User Registration
126 Handling the Response
127 Exporting Services
128 Storing the User Form Data
129 Extra Exercise Add Another Field
130 Understanding Authentication
131 Logging the user in after Signup
132 Understanding Actions
133 Using Actions
134 Connecting the User with their Data
135 Initializing Firebase First
136 Persisting the User Authentication
137 Setting up the Login
138 Signing Out
139 Sidebar JSON Web Tokens

Master Project Routing
140 Understanding Routing
141 Reviewing the Router Configuration
142 Creating Routes
143 History Mode
144 Navigating with Links
145 Custom Links
146 Tailwind Styles for Active Links
147 Naming Routes
148 Setting up Catch-All and Redirect Routes
149 Route Alias
150 Guarding Routes
151 Route Specific Guards
152 Guarding Authentication Only Routes
153 Redirecting after Logging Out
154 Route Meta Fields

Master Project Uploading Files
155 Preparing the Upload Component
156 Handling Drag and Drop Events
157 Handling the File
158 Enabling Firebases Storage Service
159 Uploading Files with Firebase
160 Firebase Rules and Validation
161 Adding the Progress Bar
162 Making the Progress Bar Dynamic
163 Improving the Progress Bar
164 Handling Errors and Successful Uploads
165 Storing the File Data in the Database
166 Firebase References and Snapshots
167 Fallback Upload
168 Canceling Uploads
169 Cancelling Uploads with Refs
170 One more thing about References
171 Querying the Database
172 Storing the List of Songs
173 Displaying the List of Songs
174 Prop Validation
175 Toggling the Form
176 Validating the Song Form
177 Editing a Song
178 Deleting a Song from the StorageDatabase
179 Updating the list of songs after an Upload
180 Router Leave Guards

Master Project Playing Music
181 Creating the Home Page
182 Checking the Scroll Position
183 Infinite Scrolling
184 Path Parameters
185 Creating the Song Template
186 Validating the Comment
187 Prepping the Form
188 Finalizing the Comment Form
189 Displaying the Comments
190 Updating the Comments List
191 Query Parameters
192 Detecting Query Parameters
193 Updating the Comment Count
194 Storing the song in the State
195 Playing Audio
196 Toggling Audio
197 Duration and Current Position
198 Formatting the Time
199 Player Progress Bar
200 Changing the Audio Position
201 Extra Exercise Update the play Button
202 Creating links with Hash Fragments
203 Route Transitions

Master Project Directives
204 Introduction to Directives
205 Writing our First Directive
206 Passing Values to Directives
207 Directive Modifiers
208 Registering a Directive Locally

Master Project Internationalization
209 Introduction to i18n
210 Our First Translation
211 Formatting and Pluralization
212 Number Localizations
213 Translating HTML with Component Interpolation
214 Changing Locales
215 Exercise Translating the Rest of the App

Master Project PWA (Progressive Web App)
216 What are Progressive Web Apps
217 The Manifest File
218 Generating the Manifest File
219 Configuring the Manifest File
220 Offline Support with Service Workers
221 Understanding Caching
222 Workbox
223 Firebase Data Persistence
224 Handling Offline Uploads

Master Project Performance Optimizations
225 Overview
226 Auto-Registering Global Components
227 Perceived Performance
228 Dynamic Route Imports
229 Progress Bar
230 Code Coverage
231 Rollup Visualizer

Master Project Deployment + Production
232 Deploying an App with Vercel
233 Sharing Your Project

Master Project Testing Your Vue App
234 Introduction to Testing
235 Introduction to Vitest
236 Adding the Vitest UI
237 Writing Our First Test
238 Mounting with Vue Test Utils
239 Testing the Inner Content
240 Passing Data to Components
241 Stubbing Components
242 Avoid Boolean Assertions
243 Testing Children Components
244 Mocking Methods
245 Testing Attributes
246 Testing Pinia Actions
247 Mocking Promises
248 Testing Router Components
249 Snapshot Testing
250 E2E Testing Overview
251 Writing an E2E Test

Composition API
252 The Composition API
253 Mixins
254 Reactive References
255 The Reactive Function
256 Watchers and Computed Properties
257 Lifecycle Functions
258 Props
259 Template Refs
260 Emitting Events
261 Advantages of the Composition API
262 Router Hooks
263 Pinia Hooks
264 Verifying Reactivity
265 The setup Attribute

Component Design Patterns
266 Section Overview
267 Controlled Components
268 Separation of Concerns
269 Third-Party Libraries as Controlled Components
270 Moving Beyond Vues Event System
271 Encapsulating Scrolling
272 The Teleport Component

Where To Go From Here
273 Thank You!
274 Become An Alumni
275 Endorsements On LinkedIn
276 Learning Guideline
277 Coding Challenges

Appendix Extra Bits
278 Quick Note Upcoming Videos
279 For WINDOWS Users ONLY
280 Using The TerminalCommand Prompt
281 Running script.js In Node
282 Modules In Node
283 ES6 Modules
284 ES6 Modules In Node
285 Types of Modules

286 Special Bonus Lecture