CF

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

27h 56m 34s
English
Paid

The only Vue.js tutorial + projects course you need to learn Vue (including all new Vue 3 features), build large-scale Vue applications from scratch & get hired as a Vue developer in 2022. Go from Zero To VUE Mastery.

  • Build enterprise level Vue applications and deploy to production
  • Learn to build reactive, performant, large scale applications like a senior developer
  • Learn to build beautiful applications using TailwindCSS, Sass, CSS Animations and Transitions
  • Become a top 10% Vue.js Developer
  • Learn to compare tradeoffs when it comes to performance and scalability
  • Use Firebase to build full stack applications
  • Master Vue design patterns
  • Converting apps to Progressive Web Apps
  • Using the latest ES6/ES7/ES8/ES9/ES10/ES11 JavaScript to write clean code
  • File Uploads, Testing, PWAs, Internationalization, Authentication with Vue 3
  • Learn the latest features with Vue 3 including Composition API, Vuex, Vue Router + more
  • Master the latest ecosystem of a Vue Developer from scratch
  • Use Vuex for state management in your applications
  • Set up authentication and user accounts
  • Learn to lead Vue projects by making good architecture decisions and helping others on your team
  • Routing with Vue Router
  • Testing your application with Jest, snapshot testing, and even E2E testing
  • Learn why Vue is outgrowing React and Angular in developer popularity

About the Author: Zero To Mastery

Zero To Mastery thumbnail

Zero To Mastery (ZTM) is a Toronto-based online coding academy founded by Andrei Neagoie, originally a senior developer at large Canadian tech firms before turning to teaching full-time. The academy's signature is the cohort-based bootcamp track combined with a deep self-paced course library, all aimed at career-changers and self-taught developers preparing to land software-engineering roles at top companies.

The instructor roster has grown well beyond Andrei to include other senior practitioners: Daniel Bourke (machine learning), Aleksa Tešić (DevOps), Jacinto Wong, and others. Courses cover the full software-engineering career path: web development with React and Next.js, Python, machine learning and deep learning, DevOps and cloud, system design, mobile, and the algorithm / data-structure interview prep that gates engineering jobs.

The CourseFlix listing under this source carries over 120 ZTM courses spanning that full range. Material is paid; ZTM itself runs on a monthly / annual membership model. The teaching style favours long-form, project-based courses where students build complete portfolio-quality applications rather than disconnected feature tutorials.

Watch Online 268 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 268 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Outline
All Course Lessons (268)
#Lesson TitleDurationAccess
1
Course Outline Demo
05:56
2
Join Our Online Classroom!
04:02
3
Vue vs React vs Angular
12:08
4
Composition vs. Options API
02:14
5
ZTM Resources
04:24
6
Getting Started
07:38
7
Vue Dev Tools
06:02
8
Working with Data
08:44
9
Multiple Vue Instances
04:07
10
Accessing the Instance Data
06:03
11
Methods
04:41
12
Directives
05:08
13
Two-way data binding
07:14
14
Binding Attributes
02:40
15
Outputting Raw HTML
06:02
16
Listening to Events
07:07
17
Passing on Data with Events
02:34
18
Event Modifiers
02:32
19
Keyboard Events and Modifiers
04:55
20
v-model Modifiers
05:20
21
Computed Properties
09:07
22
Watchers
03:13
23
Binding Classes
08:10
24
Binding Styles
05:14
25
Conditional Rendering
10:05
26
The v-show Directive
04:25
27
List Rendering
12:01
28
Understanding the role of the key attribute
08:16
29
Creating a Perspective Playground
11:46
30
Copying to the Clipboard
04:07
31
Mounting the Vue Instance
04:19
32
Understanding Lifecycle Hooks
04:41
33
Using Lifecycle Hooks
09:22
34
Virtual DOM
07:23
35
Understanding Reactivity with Proxies
07:34
36
The Vue Compiler
13:03
37
Introduction to Components
07:43
38
Overview
02:17
39
Introduction to Vite
05:30
40
Exploring Vite
05:47
41
Understanding SASS
08:01
42
PostCSS
06:38
43
Installing ESLint
04:53
44
Configuring ESLint
07:28
45
Webpack
08:22
46
Conclusion
00:47
47
Scaffolding a Vue Project
09:09
48
Sidebar: Understanding Servers
05:26
49
Reviewing the Files
09:30
50
Creating Components
04:05
51
Child Components
08:17
52
Component Styles
06:30
53
Using SASS in Components
02:06
54
Communicating Between Components
02:22
55
Props
06:14
56
The Limitations of Props
03:47
57
Emitting Events
08:35
58
Validating Props
07:36
59
Callback Functions
04:59
60
Inserting content with slots
08:34
61
Named Slots
07:08
62
Dynamic Components
09:39
63
Animating with CSS Transitions
09:48
64
Fine-tuning Transitions
05:12
65
Animating with CSS Animations
08:33
66
Animating with JavaScript
06:35
67
JavaScript Zoom Animation
06:52
68
CSS and JavaScript Transitions
03:25
69
Animating a List
08:54
70
Fixing the Animation
04:20
71
Transition CSS Class Names
05:38
72
Setting up the Quiz Application
05:01
73
Rendering the Questions
12:05
74
Moving between Questions
10:45
75
Finishing Touches
11:28
76
Exercise: Imposter Syndrome
02:57
77
The Next Step
01:32
78
Creating a New Project
04:40
79
Reviewing the Files
06:20
80
Formatting with ESLint and Prettier
04:31
81
Adding the Template
08:14
82
What is Tailwind?
05:37
83
Installing Tailwind
07:59
84
Practicing with Tailwind
05:16
85
Loading Assets
04:01
86
Understanding State
05:35
87
Reviewing the Pinia Configuration
06:06
88
Splitting the Template into Components
05:24
89
Disabling Vue’s Rules
04:54
90
Working with State
06:41
91
Alternative Mapping Functions
03:07
92
Understanding Getters
01:32
93
Using Getters
04:10
94
Closing the Modal
02:06
95
Aliases
03:14
96
Adding Tabs
05:34
97
Setting up Form Validation
04:31
98
Registering a Plugin
05:35
99
Validation Components
05:32
100
Defining Rules
03:49
101
Applying Rules
05:36
102
Additional Rules
06:32
103
Validating Emails
03:41
104
Validating Numbers
04:33
105
Validating Passwords
05:02
106
Dropdown and Checkbox Fields
07:30
107
Validating the Form
04:02
108
Sidebar: Slot Properties
08:35
109
Rendering Multiple Error Messages
06:23
110
Default Values
01:55
111
Custom Error Messages
10:35
112
Validation Triggers
03:59
113
Showing Alerts
08:58
114
Setting up the Login Form
18:01
115
Understanding Authentication
06:25
116
Reviewing the Rules
04:51
117
Setting up the Firebase SDK
07:38
118
User Registration
06:31
119
Handling the Response
04:49
120
Exporting Services
04:55
121
Storing the User Form Data
07:57
122
Understanding Authentication
06:26
123
Logging the user in after Signup
06:48
124
Understanding Actions
02:23
125
Using Actions
07:46
126
Connecting the User with their Data
08:26
127
Initializing Firebase First
04:40
128
Persisting the User Authentication
06:30
129
Setting up the Login
06:43
130
Signing Out
08:04
131
Sidebar: JSON Web Tokens
09:12
132
Understanding Routing
04:46
133
Reviewing the Router Configuration
05:07
134
Creating Routes
07:10
135
History Mode
08:48
136
Navigating with Links
05:48
137
Custom Links
05:22
138
Tailwind Styles for Active Links
05:03
139
Naming Routes
04:16
140
Setting up “Catch-All” and Redirect Routes
06:24
141
Route Alias
02:39
142
Guarding Routes
05:14
143
Route Specific Guards
04:55
144
Guarding Authentication Only Routes
03:21
145
Redirecting after Logging Out
04:56
146
Route Meta Fields
08:27
147
Preparing the Upload Component
06:19
148
Handling Drag and Drop Events
08:13
149
Handling the File
06:35
150
Enabling Firebase’s Storage Service
01:21
151
Uploading Files with Firebase
05:58
152
Firebase Rules and Validation
07:02
153
Adding the Progress Bar
06:54
154
Making the Progress Bar Dynamic
03:14
155
Improving the Progress Bar
04:53
156
Handling Errors and Successful Uploads
06:43
157
Storing the File Data in the Database
10:42
158
Firebase References and Snapshots
02:38
159
Fallback Upload
04:39
160
Canceling Uploads
04:46
161
Cancelling Uploads with Refs
07:02
162
One more thing about References
04:44
163
Querying the Database
06:05
164
Storing the List of Songs
04:45
165
Displaying the List of Songs
03:03
166
Prop Validation
02:53
167
Toggling the Form
02:48
168
Validating the Song Form
07:01
169
Editing a Song
12:54
170
Deleting a Song from the Storage/Database
10:07
171
Updating the list of songs after an Upload
08:05
172
Router Leave Guards
09:44
173
Creating the Home Page
09:41
174
Checking the Scroll Position
08:13
175
Infinite Scrolling
08:24
176
Path Parameters
04:48
177
Creating the Song Template
09:54
178
Validating the Comment
03:59
179
Prepping the Form
04:44
180
Finalizing the Comment Form
10:24
181
Displaying the Comments
06:22
182
Updating the Comments List
07:35
183
Query Parameters
05:45
184
Detecting Query Parameters
06:56
185
Updating the Comment Count
04:28
186
Storing the song in the State
07:28
187
Playing Audio
03:34
188
Toggling Audio
10:04
189
Duration and Current Position
06:14
190
Formatting the Time
04:33
191
Player Progress Bar
08:22
192
Changing the Audio Position
10:24
193
Creating links with Hash Fragments
04:49
194
Route Transitions
04:45
195
Introduction to Directives
05:32
196
Writing our First Directive
05:48
197
Passing Values to Directives
05:23
198
Directive Modifiers
05:07
199
Registering a Directive Locally
04:41
200
Introduction to i18n
06:02
201
Our First Translation
07:08
202
Formatting and Pluralization
06:41
203
Number Localizations
08:40
204
Translating HTML with Component Interpolation
05:57
205
Changing Locales
05:42
206
Exercise: Translating the Rest of the App
02:51
207
What are Progressive Web Apps?
04:20
208
The Manifest File
05:25
209
Generating the Manifest File
05:36
210
Configuring the Manifest File
03:31
211
Offline Support with Service Workers
06:01
212
Understanding Caching
03:01
213
Workbox
05:17
214
Firebase Data Persistence
04:19
215
Handling Offline Uploads
05:36
216
Overview
01:55
217
Auto-Registering Global Components
10:39
218
Perceived Performance
07:18
219
Dynamic Route Imports
05:54
220
Progress Bar
05:40
221
Code Coverage
04:01
222
Rollup Visualizer
05:03
223
Deploying an App with Vercel
11:18
224
Introduction to Testing
12:16
225
Introduction to Vitest
02:51
226
Adding the Vitest UI
02:56
227
Writing Our First Test
08:58
228
Mounting with Vue Test Utils
06:40
229
Testing the Inner Content
04:16
230
Passing Data to Components
05:12
231
Stubbing Components
04:51
232
Avoid Boolean Assertions
01:38
233
Testing Children Components
06:31
234
Mocking Methods
05:34
235
Testing Attributes
06:29
236
Testing Pinia Actions
06:08
237
Mocking Promises
04:15
238
Testing Router Components
06:36
239
Snapshot Testing
11:55
240
E2E Testing Overview
06:31
241
Writing an E2E Test
12:22
242
The Composition API
06:01
243
Mixins
10:24
244
Reactive References
07:10
245
The Reactive Function
07:05
246
Watchers and Computed Properties
08:04
247
Lifecycle Functions
03:08
248
Props
06:10
249
Template Refs
04:39
250
Emitting Events
01:55
251
Advantages of the Composition API
11:52
252
Router Hooks
07:43
253
Pinia Hooks
03:04
254
Verifying Reactivity
03:09
255
The setup Attribute
02:59
256
Section Overview
01:14
257
Controlled Components
17:57
258
Separation of Concerns
04:56
259
Third-Party Libraries as Controlled Components
14:05
260
Moving Beyond Vue’s Event System
11:28
261
Encapsulating Scrolling
08:36
262
The Teleport Component
11:56
263
Thank You!
01:18
264
Using The Terminal/Command Prompt
10:06
265
Running script.js In Node
03:06
266
Modules In Node
04:23
267
ES6 Modules In Node
09:01
268
Types of Modules
05:11
Unlock unlimited learning

Get instant access to all 267 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Books

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

#TitleTypeOpen
1Book 1 PDF

Related courses

Frequently asked questions

What is Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest) about?
The only Vue.js tutorial + projects course you need to learn Vue (including all new Vue 3 features), build large-scale Vue applications from scratch & get hired as a Vue developer in 2022. Go from Zero To VUE Mastery.
Who teaches this course?
It is taught by Zero To Mastery. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 268 lessons with a total runtime of 27 hours 56 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/complete-vue-developer-2023-zero-to-mastery-pinia-vitest. The page hosts every lesson with the integrated video player; no download is required.