Vue - The Complete Guide (incl. Router & Composition API)

28h 45m 29s
English
Paid

Master the latest version of Vue.js from scratch with our comprehensive course. Build dynamic web apps using one of the most popular JavaScript frameworks!

Why Learn Vue.js?

Vue.js is rapidly becoming a favorite in the world of JavaScript frameworks. Whether you consider Google Trends, GitHub stars, or social media mentions, VueJS stands out as a rising star - it's simply outstanding!

This course offers an in-depth understanding of the latest version, Vue.js 3, from the ground up. Not only will you learn the foundational concepts, but you'll also explore advanced topics, such as the Composition API introduced in Vue 3.

Benefits of Frontend Frameworks

Frontend frameworks have gained immense popularity due to their ability to deliver a reactive and seamless user experience, akin to mobile apps but within the browser. Job opportunities demanding skills in frameworks like VueJS are among the highest paying in the industry!

VueJS merges the best features of Angular 2+ and ReactJS, simplifying the process of building anything from small widgets to enterprise-level apps, making it both efficient and enjoyable!

If you're unfamiliar with Angular or React, don't worry—this course is designed for beginners with no prior knowledge of frontend frameworks. You'll learn everything you need to know!

Comprehensive Course Coverage

This course starts with the basics, explaining what Vue.js is and how it functions, before progressing to more advanced topics. Here's a brief overview of what you'll learn:

  • What VueJS is and why you should use it.
  • The basics, including syntax, templates, and more.
  • Output reactive data and event handling.
  • DOM interaction for rendering lists and manipulating elements.
  • Setting up a development environment and workflow.
  • Using components and understanding their role.
  • A deep dive into Vue's internal workings.
  • Binding to form inputs.
  • Sending HTTP requests to backend APIs.
  • Authentication in Vue.
  • Enhancing your app with animations and transitions.
  • Creating a single-page application (SPA) using routing.
  • Improving state management with Vuex.
  • Deploying your app.
  • And much more...

All these topics are covered with real-world examples and demo projects. The course is packed with exercises, challenges, and major projects to solidify your learning.

Main Course Projects

In addition to numerous smaller projects, you'll undertake a couple of major projects:

  • A "Monster Slayer" Game - an interactive browser game powered entirely by Vue.
  • The "Learning Resource Manager" - a web app for managing your favorite learning resources with options to add, delete, and list them.
  • The "Find a Coach" app - a platform for signing up, registering as a coach, listing coaches, filtering them, and sending messages.

About the Author: Academind Pro

Academind Pro thumbnail
Academind offers the most comprehensive and up-to-date learning resources on Web Development. From the very basics up to advanced topics and real projects - we got you covered! And we'll give you course completion certificates to prove your progress to others!

Watch Online 294 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Welcome to the Course!
All Course Lessons (294)
#Lesson TitleDurationAccess
1
Welcome to the Course! Demo
01:40
2
What is "Vue.js"?
07:52
3
Different Ways of Using Vue
02:36
4
Exploring Vue Alternatives
03:12
5
Building A First App With Just JavaScript
07:27
6
Re-building the App with Vue
11:40
7
Vue vs "Vanilla JavaScript" (just JavaScript)
01:11
8
Setting Up the Course Development Environment
02:05
9
Course Outline & What's In The Course
02:59
10
How To Get The Most Out Of This Course
03:24
11
Module Introduction
00:49
12
Creating and Connecting Vue App Instances
08:41
13
Interpolation and Data Binding
03:36
14
Binding Attributes with the "v-bind" Directive
05:38
15
Understanding "methods" in Vue Apps
05:48
16
Working with Data inside of a Vue App
03:24
17
Outputting Raw HTML Content with v-html
03:32
18
A First Summary
04:13
19
Understanding Event Binding
07:18
20
Events & Methods
06:13
21
Working with Event Arguments
03:00
22
Using the Native Event Object
09:00
23
Exploring Event Modifiers
09:55
24
Locking Content with v-once
02:09
25
Data Binding + Event Binding = Two-Way Binding
06:33
26
Methods used for Data Binding: How It Works
06:47
27
Introducing Computed Properties
05:59
28
Working with Watchers
10:50
29
Methods vs Computed Properties vs Watchers
02:28
30
v-bind and v-on Shorthands
01:54
31
Dynamic Styling with Inline Styles
07:20
32
Adding CSS Classes Dynamically
06:32
33
Classes & Computed Properties
01:58
34
Dynamic Classes: Array Syntax
01:23
35
Module Summary
04:28
36
Module Introduction
01:36
37
Understanding the Problem
03:17
38
Rendering Content Conditionally
05:10
39
v-if, v-else and v-else-if
04:19
40
Using v-show Instead Of v-if
02:26
41
Rendering Lists of Data
06:21
42
Diving Deeper Into v-for
05:13
43
Removing List Items
04:00
44
Lists & Keys
08:27
45
Module Summary
02:16
46
Module Introduction
01:19
47
Project Setup & First Methods
12:28
48
Updating the Health Bars
07:08
49
Adding a "Special Attack"
06:24
50
Adding a "Heal" Functionality
04:48
51
Adding a "Game Over" Screen
09:39
52
Finishing the Core Functionality
06:09
53
Adding a Battle Log
14:12
54
Module Introduction
01:32
55
An Introduction to Vue's Reactivity
04:27
56
Vue Reactivity: A Deep Dive
08:11
57
One App vs Multiple Apps
03:54
58
Understanding Templates
03:57
59
Working with Refs
05:23
60
How Vue Updates the DOM
06:27
61
Vue App Lifecycle - Theory
04:47
62
Vue App Lifecycle - Practice
09:49
63
Module Introduction
01:31
64
Understanding the Problem
08:40
65
Introducing Components
10:55
66
The Why: Building Complex User Interfaces With Components
01:01
67
Module Introduction
01:36
68
Why We Need A Development Server
03:30
69
Why We Want A Better Developer Experience
05:51
70
Installing & Using the Vue CLI
08:28
71
Inspecting the Created Project
06:00
72
Inspecting the Vue Code & ".vue" Files
06:05
73
Adding the "Vetur" Extension to VS Code
01:16
74
More on ".vue" Files
01:41
75
A New Vue Project
05:06
76
Creating a Basic Vue App
09:33
77
Adding a Component
08:15
78
Adding Styling
02:17
79
Module Introduction
01:42
80
Introducing "Props" (Parent => Child Communication)
10:04
81
Prop Behavior & Changing Props
06:31
82
Validating Props
07:15
83
Working with Dynamic Prop Values
05:38
84
Emitting Custom Events (Child => Parent Communication)
11:16
85
Defining & Validating Custom Events
04:06
86
Demo: Adding Components & Connecting Them
13:16
87
Demo: Adding More Component Communication
06:25
88
A Potential Problem
06:27
89
Provide + Inject To The Rescue
08:17
90
Provide + Inject for Functions / Methods
04:00
91
Provide + Inject vs Props & Custom Events
02:07
92
Module Summary
04:45
93
Module Introduction
01:39
94
Project Setup
02:39
95
Global vs Local Components
09:23
96
Scoped Styles
05:16
97
Introducing Slots
06:25
98
Named Slots
05:36
99
Slot Styles & Compilation
02:27
100
More on Slots
07:20
101
Scoped Slots
09:35
102
Dynamic Components
07:08
103
Keeping Dynamic Components Alive
02:45
104
Applying What We Know & A Problem
09:25
105
Teleporting Elements
03:51
106
Working with Fragments
01:24
107
The Vue Style Guide
03:03
108
Moving to a Different Folder Structure
02:57
109
Module Summary
03:39
110
Module Introduction
01:38
111
Setup & First Steps
05:25
112
First Components & Props
10:47
113
Styling and More Components
07:20
114
Header & BaseCard Components
07:01
115
Adding a Base Button
05:20
116
Dynamic Components & Attribute Fallthrough
08:39
117
Adding & Styling Tabs
04:59
118
Adding a Form
04:13
119
Fetching User Input
08:28
120
Adding a Modal Dialog
12:20
121
Deleting Items
06:43
122
Adding "Teleport"
01:30
123
Module Introduction
00:34
124
v-model & Inputs
06:04
125
Working with v-model Modifiers and Numbers
06:55
126
v-model and Dropdowns
02:27
127
Using v-model with Checkboxes & Radiobuttons
07:14
128
Adding Basic Form Validation
05:14
129
Building a Custom Control Component
06:28
130
Using v-model on Custom Components
06:49
131
Module Summary
01:15
132
Module Introduction
01:10
133
Starting App & Why we need a Backend
05:05
134
Adding a Backend
03:22
135
How To (Not) Send Http Requests
05:25
136
Sending a POST Request to Store Data
05:46
137
Getting Data (GET Request) & Transforming Response Data
09:52
138
Loading Data When a Component Mounts
02:01
139
Showing a "Loading..." Message
02:56
140
Handling the "No Data" State
03:01
141
Handling Technical / Browser-side Errors
06:43
142
Handling Error Responses
06:50
143
Module Summary
01:33
144
Module Introduction
00:42
145
What & Why?
04:40
146
Routing Setup
04:37
147
Registering & Rendering Routes
06:26
148
Navigating with router-link
04:56
149
Styling Active Links
03:06
150
Programmatic Navigation
04:02
151
Passing Data with Route Params (Dynamic Segments)
10:47
152
Navigation & Dynamic Paths
03:01
153
Updating Params Data with Watchers
05:32
154
Passing Params as Props
03:38
155
Redirecting & "Catch All" Routes
07:51
156
Using Nested Routes
05:35
157
More Fun with Named Routes & Location Objects
05:22
158
Using Query Params
04:00
159
Rendering Multiple Routes with Named Router Views
05:52
160
Controlling Scroll Behavior
06:18
161
Introducing Navigation Guards
07:32
162
Diving Deeper Into Navigation Guards
06:51
163
The Global "afterEach" Guard
01:28
164
Beyond Entering: Route Leave Guards
07:14
165
Utilizing Route Metadata
02:15
166
Organizing Route Files
04:50
167
Summary
02:13
168
Module Introduction
01:12
169
Animation Basics & CSS Transitions
07:29
170
Understanding CSS Animations
04:21
171
Why Is "Just CSS" Not Enough?
04:28
172
Playing CSS Animations with Vue's Help
04:47
173
Using the Transition Component
05:03
174
CSS Animations with the Transition Component
02:29
175
Using Custom CSS Class Names
03:35
176
Example: Animating a Modal
08:39
177
Transitioning Between Multiple Elements
09:16
178
Using Transition Events
08:32
179
Building JavaScript Transitions (instead of CSS)
14:58
180
Disabling CSS Transitions
03:06
181
Getting Started with Animated Lists
06:45
182
Animating Lists with "transition-group"
05:27
183
Animate List Item Movement
03:54
184
Animating Route Changes
12:16
185
Module Introduction
01:00
186
What & Why?
07:12
187
Creating & Using a Store
04:44
188
Connecting Components to State
02:37
189
Introducing Mutations - A Better Way of Changing Data
06:31
190
Passing Data to Mutations with Payloads
04:08
191
Introducing Getters - A Better Way Of Getting Data
07:42
192
Running Async Code with Actions
07:34
193
Understanding the Action "Context"
02:03
194
Using Mapper Helpers
05:58
195
Example: Adding More State
08:10
196
Organizing your Store with Modules
04:11
197
Understanding Local Module State
04:28
198
Namespacing Modules
05:04
199
Structuring Vuex Code & Files
08:45
200
A Challenge!
01:52
201
Challenge Solution (1/3)
12:01
202
Challenge Solution (2/3)
11:28
203
Challenge Solution (3/3)
03:19
204
Summary
01:20
205
Module Introduction
02:36
206
Planning the Project / Web App
04:27
207
Planning the Data Requirements
05:12
208
Planning the Layout / Components
05:07
209
Registering Routes
05:59
210
Adding Route Page Components
05:28
211
Working on the Main Layout & Styling
07:43
212
Wiring Up Pages
05:23
213
Adding Vuex and Coach Data
12:16
214
Working on the Coaches List and List Items
11:22
215
Adding a Couple of Base Components (Base Card, Base Button, Base Badge)
12:55
216
Building the Coach Detail Component
08:25
217
Filtering Coaches
11:11
218
Registering as a Coach: The Form
10:14
219
Adding Coaches to Vuex
13:38
220
Adding Form Validation
12:36
221
Working on the Contact Form
08:10
222
Storing Requests (Messages) With Vuex
08:32
223
Outputting Incoming Requests (Messages)
10:02
224
Filtering Requests for the Active Coach
04:46
225
Sending a PUT Http Request to Store Coach Data
11:06
226
Fetching Coach Data (GET Http Request)
07:52
227
Rendering a Loading Spinner
06:39
228
Adding Http Error Handling
09:19
229
Sending Coaching Requests Http Requests
15:49
230
Caching Http Response Data
08:30
231
Adding Route Transitions
10:21
232
The "Not Found" Page & Summary
02:20
233
Module Introduction
01:01
234
How Authentication Works in Vue Apps (or any SPA)
06:10
235
Locking / Protecting Backend Resources
05:57
236
Adding an Authentication Page (Login & Signup)
09:55
237
Preparing Vuex
04:23
238
Adding a "Signup" Action & Flow
09:06
239
Better UX: Loading Spinner & Error Handling
05:32
240
Adding a "Login" Action & Flow
03:16
241
Attaching the Token to Outgoing Requests
04:21
242
Updating the UI Based on Auth State
04:05
243
Adding a "Logout" Action & Flow
03:35
244
Authentication & Routing (incl. Navigation Guards)
11:42
245
Adding "Auto Login"
08:53
246
Adding "Auto Logout"
13:35
247
Summary
01:20
248
Module Introduction
01:11
249
What To Deploy?
02:51
250
Optimization: Using Asynchronous Components
12:17
251
Building the Project For Production
03:55
252
Deploying a Vue App
08:56
253
Module Introduction
02:01
254
Which Problem Does The Composition API Solve?
06:52
255
Replacing "data" with "refs"
11:31
256
Building "reactive" Objects
10:58
257
Reactivity: A Deep Dive
08:24
258
Replacing "methods" with Regular Functions
07:03
259
Replacing "Computed Properties" with the "computed" Function
07:53
260
Two-Way-Binding and the Composition API
02:59
261
Working with Watchers
05:43
262
A First Summary
01:38
263
How To Use Template Refs
04:50
264
Components, Props & The Composition API
07:58
265
Emitting Custom Events
02:34
266
Working with Provide/ Inject
03:43
267
Lifecycle Hooks in the Composition API
05:15
268
Migrating from Options API to Composition API - An Example Project
01:57
269
Migrating a First Component
06:41
270
Migrating a Big Component
12:39
271
Migrating the Remaining Components
11:57
272
Routing, Params & The Composition API
07:28
273
The Route & Router Objects and the Composition API
05:09
274
Using Vuex with the Composition API
04:34
275
Summary
03:11
276
Module Introduction
01:17
277
Reusability Concepts
04:55
278
Using Mixins
04:49
279
Understanding Mixin Merging
03:12
280
Global Mixins
02:53
281
Disadvantages of Mixins
03:29
282
Custom Hooks / Composables & The Composition API
08:41
283
More Custom Composition Functions
03:49
284
Why Hooks / Composables Beat Mixins
01:28
285
Example: Creating a "Search" Hook
11:30
286
Custom Hooks Gotchas
08:44
287
More Thoughts on Custom Hooks / Composables
02:55
288
Example: A Custom "Sort" Hook
05:30
289
Thanks for being part of the course!
00:56
290
Course Roundup & Next Steps
03:09
291
Vue 3 - Overview
06:31
292
Important Changes & Migration Steps
17:52
293
Vue 3: New Features
05:28
294
The New Composition API (Optional!)
23:46
Unlock unlimited learning

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

Learn more about subscription