w3docs logo
Log in

Vue 3 - The Complete Guide (incl. Router, Vuex, Composition API)

Learn Vue.js - in its latest version - step by step from the ground up. Learn how to build highly reactive web apps with one of the most popular frameworks!

Start
  1. Courses
  3. Vue 3 - The Complete Guide (incl. Router, Vuex, Composition API)

No matter at which metric you look at (Google Trends, Github Stars, Tweets ...) - VueJS is the shooting star in the world of JavaScript frameworks - it simply is amazing!

This course teaches the latest version of Vue (Vue.js 3) from the ground up and in great detail. We'll cover all the core basics but we'll not stop thereafter - this course also dives into advanced concepts like the Composition API introduced with Vue 3.

Frontend frameworks are extremely popular because they give us this reactive, great user experience we know from mobile apps - but now in the browser! No wonder that jobs requiring frontend framework skills like VueJS are amongst the best paid ones in the industry!

You may know Angular 2+ and ReactJS, well, VueJS combines the best of both frameworks and makes building anything from small widgets to big, enterprise-level apps a breeze and a whole lot of fun!

And if you don't know the two mentioned frameworks: That's fine, too, this course does not expect any knowledge of any other frontend framework - you will learn it all throughout this Course!

This course covers it all!

We'll start at the very basics, what Vue.js is and how it works before we move on to more complex and advanced topics but I'll be honest: It's too much to fit it all into one sentence, so here's what you'll learn in this Course:

  • What is VueJS and Why would you use it?
  • The Basics (including the basic Syntax, Understanding Templates and much more!)
  • How to Output Reactive Data & Listen to Events
  • Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements ...)
  • Setting up a Development Environment and Workflow
  • Using Components (and what Components are to begin with)
  • A Deep Dive Look Behind the Scenes of Vue
  • Binding to Form Inputs
  • Sending Http Requests to Backend APIs
  • Authentication & Vue
  • How to make your App more Beautiful with Animations and Transitions
  • How to create an awesome Single-Page-Application (SPA) with Routing
  • How to improve State Management by using Vuex
  • How to Deploy the App
  • And much more ...

All these topics are taught with real examples and demo projects. This course is full of exercises, challenges and bigger courser projects that allow you to practice what you learned.

Along with many other smaller projects, we will build a couple of bigger main projects:

  • The "Monster Slayer" Game - a game running in the browser, 100% powered by Vue
  • The "Learning Resource Manager" - a web app that allows you to manage (add, delete, list) your favorite learning resources
  • The "Find a Coach" app - a web app that allows you to sign up / login, register as a coach, list and filter available coaches and send messages to coaches

Is this course for you?

Now that you know what this course is about, let's see if this course is for you!

Here are three types of students who will love this course:

Student #1:

Has some JavaScript experience and is interested in what this language can do. You heard and read that JavaScript allows you to create nice web applications and enhance existing web pages. VueJS is your choice!

Student #2:

You already have some experience with other frontend frameworks like Angular (2+) or ReactJS. But either due to interest or disappointment of the existing frameworks, you seek some alternatives - VueJS might be what you were looking for!

Student #3:

Has experience with backend frameworks/ languages but now also wants to enter the frontend world. VueJS is an awesome choice here, it's fun, it uses native JS and it's extremely powerful!

Bonus: Student #4

Is disappointed by Angular 2+. Does a good framework need 2 hours of setup? No, certainly not - as VueJS will prove to this student!

Let's dive into VueJS right now!

Section: Getting Started

1. Welcome to the Course! (1:39)
2. What is "Vue.js"? (7:51)
3. Different Ways of Using Vue (2:35)
4. Exploring Vue Alternatives (3:11)
5. Building A First App With Just JavaScript (7:26)
6. Re-building the App with Vue (10:51)
7. Vue vs "Vanilla JavaScript" (just JavaScript) (1:10)
8. Setting Up the Course Development Environment (2:04)
9. Course Outline & What's In The Course (2:58)
10. How To Get The Most Out Of This Course (3:23)
11. Module Resources (1:00)

Section: Basics & Core Concepts - DOM Interaction with Vue

12. Module Introduction (0:48)
13. Creating and Connecting Vue App Instances (8:40)
14. Interpolation and Data Binding (3:35)
15. Binding Attributes with the "v-bind" Directive (5:37)
16. Understanding "methods" in Vue Apps (5:47)
17. Working with Data inside of a Vue App (3:23)
18. Outputting Raw HTML Content with v-html (3:31)
19. A First Summary (4:12)
20. Time to Practice: Data Binding - Problem (2:55)
21. Time to Practice: Data Binding - Solution (11:34)
22. Understanding Event Binding (7:17)
23. Events & Methods (6:12)
24. Working with Event Arguments (2:59)
25. Using the Native Event Object (8:59)
26. Exploring Event Modifiers (9:53)
27. Locking Content with v-once (2:07)
28. Time to Practice: Event Binding - Problem (1:47)
29. Time to Practice: Event Binding - Solution (8:54)
30. Data Binding + Event Binding = Two-Way Binding (6:32)
31. Methods used for Data Binding: How It Works (6:46)
32. Introducing Computed Properties (5:58)
33. Working with Watchers (10:49)
34. Methods vs Computed Properties vs Watchers (2:27)
35. v-bind and v-on Shorthands (1:53)
36. Time to Practice: Reactivity - Problem (1:57)
37. Time to Practice: Reactivity - Solution (9:00)
38. Dynamic Styling with Inline Styles (7:19)
39. Adding CSS Classes Dynamically (6:31)
40. Classes & Computed Properties (1:57)
41. Dynamic Classes: Array Syntax (1:22)
42. Time to Practice: Dynamic Styling - Problem (2:32)
43. Time to Practice: Dynamic Styling - Solution (8:24)
44. Module Summary (4:14)
45. Module Resources (1:00)

Section: Rendering Conditional Content & Lists

46. Module Introduction (1:35)
47. Understanding the Problem (3:16)
48. Rendering Content Conditionally (5:09)
49. v-if, v-else and v-else-if (4:18)
50. Using v-show Instead Of v-if (2:25)
51. Rendering Lists of Data (6:20)
52. Diving Deeper Into v-for (5:12)
53. Removing List Items (3:59)
54. Lists & Keys (8:26)
55. Time to Practice: Conditional Content & Lists - Problem (1:09)
56. Time to Practice: Conditional Content & Lists - Solution (8:48)
57. Module Summary (2:15)
58. Module Resources (1:00)

Section: Course Project: The Monster Slayer Game

59. Module Introduction (1:18)
60. Project Setup & First Methods (12:27)
61. Updating the Health Bars (7:07)
62. Adding a "Special Attack" (6:23)
63. Adding a "Heal" Functionality (4:46)
64. Adding a "Game Over" Screen (9:37)
65. Finishing the Core Functionality (6:08)
66. Adding a Battle Log (14:11)
67. Module Resources (1:00)

Section: Vue: Behind the Scenes

68. Module Introduction (1:31)
69. An Introduction to Vue's Reactivity (4:26)
70. Vue Reactivity: A Deep Dive (8:10)
71. One App vs Multiple Apps (3:53)
72. Understanding Templates (3:56)
73. Working with Refs (5:21)
74. How Vue Updates the DOM (6:26)
75. Vue App Lifecycle - Theory (4:46)
76. Vue App Lifecycle - Practice (9:48)
77. Module Resources (1:00)

Section: Introducing Components

78. Module Introduction (1:30)
79. Understanding the Problem (8:39)
80. Introducing Components (10:54)
81. The Why: Building Complex User Interfaces With Components (1:00)
82. Multiple Vue Apps vs Multiple Components (1:00)
83. Module Resources (1:00)

Section: Moving to a Better Development Setup & Workflow with the Vue CLI

84. Module Introduction (1:35)
85. Why We Need A Development Server (3:29)
86. Why We Want A Better Developer Experience (5:50)
87. Installing & Using the Vue CLI (8:26)
88. Inspecting the Created Project (5:58)
89. Inspecting the Vue Code & ".vue" Files (6:04)
90. Adding the "Vetur" Extension to VS Code (1:15)
91. More on ".vue" Files (1:40)
92. A New Vue Project (5:05)
93. Creating a Basic Vue App (9:32)
94. Adding a Component (8:14)
95. Adding Styling (2:16)
96. A Small Addition (1:00)
97. Module Resources (1:00)

Section: Component Communication

98. Module Introduction (1:41)
99. Introducing "Props" (Parent => Child Communication) (10:03)
100. Prop Behavior & Changing Props (6:30)
101. Validating Props (7:14)
102. Supported Prop Values (1:00)
103. Working with Dynamic Prop Values (5:37)
104. Emitting Custom Events (Child => Parent Communication) (11:15)
105. Defining & Validating Custom Events (4:05)
106. Prop / Event Fallthrough & Binding All Props (1:00)
107. Demo: Adding Components & Connecting Them (13:15)
108. Demo: Adding More Component Communication (6:24)
109. Time to Practice: Props & Custom Events - Problem (3:13)
110. Time to Practice: Props & Custom Events - Solution (21:38)
111. A Potential Problem (6:26)
112. Provide + Inject To The Rescue (8:16)
113. Provide + Inject for Functions / Methods (3:59)
114. Provide + Inject for Functions / Methods (2:06)
115. Module Summary (4:44)
116. Module Resources (1:00)

Section: Diving Deeper Into Components

117. Module Introduction (1:38)
118. Project Setup (2:38)
119. Global vs Local Components (9:21)
120. Scoped Styles (5:15)
121. Introducing Slots (6:23)
122. Named Slots (5:35)
123. Slot Styles & Compilation (2:26)
124. More on Slots (7:19)
125. Scoped Slots (9:34)
126. Dynamic Components (7:06)
127. Keeping Dynamic Components Alive (2:44)
128. Applying What We Know & A Problem (9:24)
129. Teleporting Elements (3:50)
130. Working with Fragments (1:23)
131. The Vue Style Guide (3:02)
132. Moving to a Different Folder Structure (2:56)
133. Module Summary (3:38)
134. Module Resources (1:00)

Section: Course Project: The Learning Resources App

135. Module Introduction (1:37)
136. Setup & First Steps (5:24)
137. First Components & Props (10:46)
138. Styling and More Components (7:19)
139. Header & BaseCard Components (7:00)
140. Adding a Base Button (5:19)
141. Dynamic Components & Attribute Fallthrough (8:37)
142. Adding & Styling Tabs (4:58)
143. Adding a Form (4:12)
144. Fetching User Input (8:27)
145. Adding a Modal Dialog (12:19)
146. Deleting Items (6:42)
147. Adding "Teleport" (1:28)
148. Module Resources (1:00)

Section: Forms

149. Module Introduction (0:33)
150. v-model & Inputs (6:03)
151. Working with v-model Modifiers and Numbers (6:54)
152. v-model and Dropdowns (2:25)
153. Using v-model with Checkboxes & Radiobuttons (7:13)
154. Adding Basic Form Validation (5:13)
155. Building a Custom Control Component (6:27)
156. Using v-model on Custom Components (6:48)
157. Module Summary (1:14)
158. Module Resources (1:00)

Section: Sending Http Requests

159. Module Introduction (1:08)
160. Starting App & Why we need a Backend (5:04)
161. Adding a Backend (3:21)
162. How To (Not) Send Http Requests (5:23)
163. Sending a POST Request to Store Data (5:45)
164. Http Requests & Http Methods (Verbs) (1:00)
165. Getting Data (GET Request) & Transforming Response Data (9:51)
166. Loading Data When a Component Mounts (2:00)
167. Showing a "Loading..." Message (2:55)
168. Handling the "No Data" State (3:00)
169. Handling Technical / Browser-side Errors (6:41)
170. Handling Error Responses (6:49)
171. Module Summary (1:31)
172. Module Resources (1:00)

Section: Routing: Building "Multi-Page" Single Page Applications

173. Module Introduction (0:41)
174. What & Why? (4:39)
175. Routing Setup (4:36)
176. Registering & Rendering Routes (6:25)
177. Navigating with router-link (4:55)
178. Styling Active Links (3:05)
179. Programmatic Navigation (4:01)
180. Passing Data with Route Params (Dynamic Segments) (10:46)
181. Navigation & Dynamic Paths (3:00)
182. Updating Params Data with Watchers (5:30)
183. Passing Params as Props (3:37)
184. Redirecting & "Catch All" Routes (7:50)
185. Using Nested Routes (5:34)
186. More Fun with Named Routes & Location Objects (5:21)
187. Using Query Params (3:59)
188. Rendering Multiple Routes with Named Router Views (5:51)
189. Controlling Scroll Behavior (6:17)
190. Introducing Navigation Guards (7:31)
191. Diving Deeper Into Navigation Guards (6:50)
192. The Global "afterEach" Guard (1:27)
193. Beyond Entering: Route Leave Guards (7:13)
194. Utilizing Route Metadata (2:14)
195. Organizing Route Files (4:49)
196. Summary (2:12)
197. Module Resources (1:00)

Section: Animations & Transitions

198. Module Introduction (1:11)
199. Animation Basics & CSS Transitions (7:28)
200. Understanding CSS Animations (4:20)
201. Why Is "Just CSS" Not Enough? (4:27)
202. Playing CSS Animations with Vue's Help (4:45)
203. Using the Transition Component (5:02)
204. CSS Animations with the Transition Component (2:28)
205. Using Custom CSS Class Names (3:34)
206. Example: Animating a Modal (8:38)
207. Transitioning Between Multiple Elements (9:15)
208. Using Transition Events (8:31)
209. Building JavaScript Transitions (instead of CSS) (14:57)
210. Disabling CSS Transitions (3:05)
211. Getting Started with Animated Lists (6:44)
212. Animating Lists with "transition-group" (5:26)
213. Animate List Item Movement (3:53)
214. Animating Route Changes (12:15)
215. An Important Note on Animated Route Changes (1:00)
216. Module Resources (1:00)

Section: Vuex

217. Module Introduction (0:59)
218. What & Why? (7:11)
219. Creating & Using a Store (4:43)
220. Connecting Components to State (2:36)
221. Introducing Mutations - A Better Way of Changing Data (6:30)
222. Passing Data to Mutations with Payloads (4:07)
223. Introducing Getters - A Better Way Of Getting Data (7:40)
224. Running Async Code with Actions (7:33)
225. Understanding the Action "Context" (2:02)
226. Using Mapper Helpers (5:57)
227. Example: Adding More State (8:09)
228. Organizing your Store with Modules (4:10)
229. Understanding Local Module State (4:27)
230. Namespacing Modules (5:03)
231. Structuring Vuex Code & Files (8:43)
232. A Challenge! (1:51)
233. Challenge Solution (1/3) (12:00)
234. Challenge Solution (2/3) (4:57)
235. Challenge Solution (3/3) (3:18)
236. Summary (1:19)
237. Module Resources (1:00)

Section: Main Project: "Find a Coach" Web App

238. Module Introduction (2:35)
239. Planning the Project / Web App (4:26)
240. Planning the Data Requirements (5:11)
241. Planning the Layout / Components (5:06)
242. Registering Routes (5:58)
243. Adding Route Page Components (5:27)
244. Working on the Main Layout & Styling (7:42)
245. Wiring Up Pages (5:22)
246. Adding Vuex and Coach Data (12:15)
247. Working on the Coaches List and List Items (11:21)
248. Adding a Couple of Base Components (Base Card, Base Button, Base Badge) (12:53)
249. Building the Coach Detail Component (8:24)
250. Filtering Coaches (11:10)
251. Registering as a Coach: The Form (10:13)
252. Adding Coaches to Vuex (13:36)
253. Adding Form Validation (12:35)
254. Working on the Contact Form (8:08)
255. Storing Requests (Messages) With Vuex (8:31)
256. Outputting Incoming Requests (Messages) (10:01)
257. Filtering Requests for the Active Coach (4:44)
258. Sending a PUT Http Request to Store Coach Data (11:05)
259. Fetching Coach Data (GET Http Request) (7:51)
260. Rendering a Loading Spinner (6:38)
261. Adding Http Error Handling (9:17)
262. Sending Coaching Requests Http Requests (15:48)
263. Caching Http Response Data (8:28)
264. Adding Route Transitions (10:19)
265. The "Not Found" Page & Summary (2:19)
266. Module Resources (1:00)

Section: Vue & Authentication

267. Module Introduction (1:00)
268. How Authentication Works in Vue Apps (or any SPA) (6:09)
269. Locking / Protecting Backend Resources (5:56)
270. Adding an Authentication Page (Login & Signup) (9:54)
271. Preparing Vuex (4:22)
272. Adding a "Signup" Action & Flow (9:05)
273. Better UX: Loading Spinner & Error Handling (5:30)
274. Adding a "Login" Action & Flow (3:15)
275. Attaching the Token to Outgoing Requests (4:19)
276. Updating the UI Based on Auth State (4:04)
277. Adding a "Logout" Action & Flow (3:34)
278. Authentication & Routing (incl. Navigation Guards) (11:41)
279. Adding "Auto Login" (8:52)
280. Adding "Auto Logout" (13:34)
281. Summary (1:19)
282. Module Resources (1:00)

Section: Optimizing & Deploying Vue Apps

283. Module Introduction (1:10)
284. What To Deploy? (2:50)
285. Optimization: Using Asynchronous Components (12:16)
286. Building the Project For Production (3:54)
287. Deploying a Vue App (8:55)
288. Module Resources (1:00)

Section: The Composition API - Replacing the Options API

289. Module Introduction (2:00)
290. Which Problem Does The Composition API Solve? (6:51)
291. Replacing "data" with "refs" (11:29)
292. Building "reactive" Objects (10:57)
293. Reactivity: A Deep Dive (8:23)
294. Replacing "methods" with Regular Functions (7:01)
295. Time to Practice: Data & Functions - Problem (2:39)
296. Time to Practice: Data & Functions - Solution (14:24)
297. Replacing "Computed Properties" with the "computed" Function (7:52)
298. Two-Way-Binding and the Composition API (2:58)
299. Working with Watchers (5:42)
300. Time to Practice: Composition API Core Building Blocks - Problem (1:07)
301. Time to Practice: Composition API Core Building Blocks - Solution (7:00)
302. A First Summary (1:37)
303. How To Use Template Refs (4:49)
304. Components, Props & The Composition API (7:57)
305. Emitting Custom Events (2:33)
306. Working with Provide/ Inject (3:42)
307. Lifecycle Hooks in the Composition API (5:13)
308. Migrating from Options API to Composition API - An Example Project (1:55)
309. Migrating a First Component (6:40)
310. Migrating a Big Component (12:38)
311. Migrating the Remaining Components (11:56)
312. Routing, Params & The Composition API (7:27)
313. The Route & Router Objects and the Composition API (5:08)
314. Using Vuex with the Composition API (4:33)
315. Summary (3:09)
316. Module Resources (1:00)

Section: Reusing Functionality: Mixins & Custom Composition Functions

317. Module Introduction (1:16)
318. Reusability Concepts (4:54)
319. Using Mixins (4:48)
320. Understanding Mixin Merging (3:11)
321. Global Mixins (2:52)
322. Disadvantages of Mixins (3:28)
323. Custom Hooks / Composables & The Composition API (8:40)
324. More Custom Composition Functions (3:48)
325. Why Hooks / Composables Beat Mixins (1:26)
326. Example: Creating a "Search" Hook (11:28)
327. Custom Hooks Gotchas (8:43)
328. More Thoughts on Custom Hooks / Composables (2:54)
329. Example: A Custom "Sort" Hook (5:29)
330. Module Resources (1:00)

Section: Roundup & Next Steps

331. Course Roundup & Next Steps (3:08)

Section: Vue 2 to Vue 3 Migration

332. Vue 3 - Overview (6:30)
333. Important Changes & Migration Steps (17:51)
334. Vue 3: New Features (5:27)
335. The New Composition API (Optional!) (23:45)

Course Instructor

Image

Maximilian Schwarzmüller

As a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enable me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses, more than 1,000,000 students worldwide as well as a successful YouTube channel is the best proof for that.

The most rewarding experience for me is to see how people find new, better jobs, build awesome web applications, work on amazing projects or simply enjoy their hobby with the help of my content. That's why, together with Manuel Lorenz, I founded Academind to offer the best possible learning experience and to share the pleasure of learning with our students.