w3docs logo
Iniciar sesión

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Vue.js is an awesome JavaScript framework for building frontend applications! VueJS mixes the best of Angular + React!

Start
  1. Courses
  3. Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

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! 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?
  • Setting up a Development Environment and Workflow
  • The Basics (including the basic Syntax, Understanding Templates and much more!)
  • Interacting with DOM (Rendering Lists, Conditionally attaching/ detaching Elements ...)
  • Using Components (and what Components are to begin with)
  • Binding to Form Inputs
  • All about Directives, Filters and Mixins
  • 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 Deploythe App
  • And much more ...

And all the accompanied with many exercises and multiple course projects - because it isn't just about seeing code, it's about using and practicing it!

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. He heard and read that JavaScript allows you to create nice web applications and enhance existing web pages. VueJS is your choice!

Student #2:

He already has some experience with other frontend frameworks like Angular (2+) or ReactJS. But either due to interest or disappointment of the existing frameworks, he seeks 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. Take the Vue 3 Course! (1:00)
2. Course Introduction (4:08)
3. Use Vue 2 (1:00)
4. Let's Create our First VueJS Application (4:45)
5. Extending the VueJS Application (4:12)
6. Join our Online Learning Community (1:00)
7. Course Structure (3:44)
8. Take Advantage of all Course Resources! (1:55)
9. Setup VueJS Locally (2:02)
10. Useful Resources & Links (1:00)

Section: Using VueJS to Interact with the DOM

11. Module Introduction (0:45)
12. Understanding VueJS Templates (2:34)
13. How the VueJS Template Syntax and Instance Work Together (2:42)
14. Accessing Data in the Vue Instance (1:49)
15. Binding to Attributes (2:42)
16. Understanding and Using Directives (1:27)
17. Disable Re-Rendering with v-once (1:41)
18. How to Output Raw HTML (2:43)
19. Assignment: Outputting Data to Templates (Problem) (1:59)
20. Assignment: Outputting Data to Templates (Solution) (6:12)
21. Listening to Events (1:50)
22. Getting Event Data from the Event Object (2:36)
23. Passing your own Arguments with Events (1:53)
24. Modifying an Event - with Event Modifiers (3:23)
25. Listening to Keyboard Events (2:03)
26. Assignment: Events (Problem) (1:42)
27. Assignment: Events (Solution) (4:54)
28. Writing JavaScript Code in the Templates (3:19)
29. Using Two-Way-Binding (1:49)
30. Reacting to Changes with Computed Properties (9:32)
31. An Alternative to Computed Properties: Watching for Changes (3:53)
32. Saving Time with Shorthands (1:26)
33. Assignment: Reactive Properties (Problem) (2:28)
34. Assignment: Reactive Properties (Solution) (5:47)
35. Dynamic Styling with CSS Classes - Basics (4:22)
36. Dynamic Styling with CSS Classes - Using Objects (1:35)
37. Dynamic Styling with CSS Classes - Using Names (3:27)
38. Setting Styles Dynamically (without CSS Classes) (3:15)
39. Styling Elements with the Array Syntax (1:14)
40. Assignment: Styling (Problem) (3:48)
41. Assignment: Styling (Solution) (18:17)
42. Wrap Up (0:44)
43. Useful Resources & Links (1:00)

Section: Using Conditionals and Rendering Lists

44. Module Introduction (0:48)
45. Conditional Rendering with v-if (3:37)
46. Using an Alternative v-if Syntax (1:36)
47. Don't Detach it with v-show (1:43)
48. Rendering Lists with v-for (2:25)
49. Getting the Current Index (1:51)
50. Using an Alternative v-for Syntax (1:10)
51. Looping through Objects (4:44)
52. Looping through a List of Numbers (0:57)
53. Keeping Track of Elements when using v-for (4:08)
54. Assignment: Conditionals & Lists (Problem) (1:40)
55. Assignment: Conditionals & Lists (Solution) (9:38)
56. Wrap Up (0:51)

Section: First Course Project - The Monster Slayer

57. Introduction & Challenge (2:54)
58. Setting up the Course Project (2:37)
59. Creating the Vue Instance and Styling the Healthbars (5:16)
60. Showing the Player Controls Conditionally (2:02)
61. Implementing a "Start Game" Method (1:53)
62. Implementing a "Attack" Method (8:03)
63. Write better Code - Time for Refactoring! (4:52)
64. Implementing a "Special Attack" (2:11)
65. Implementing a "Heal" Method (2:21)
66. Finishing the Action Buttons (0:59)
67. Creating an Action Log (2:41)
68. Printing the Log (v-for) (2:19)
69. Finishing the Log (1:57)
70. Styling the Log Conditionally (1:44)
71. Wrap Up (1:28)
72. Full Application Code (1:00)

Section: Understanding the VueJS Instance

73. Module Introduction (1:04)
74. Some Basics about the VueJS Instance (2:58)
75. Using Multiple Vue Instances (2:52)
76. Accessing the Vue Instance from Outside (3:29)
77. How VueJS manages your Data and Methods (4:01)
78. A Closer Look at $el and $data (4:55)
79. Placing $refs and Using them on your Templates (5:47)
80. Where to learn more about the Vue API (0:58)
81. Mounting a Template (6:42)
82. Using Components (4:56)
83. Limitations of some Templates (2:35)
84. How VueJS Updates the DOM (3:24)
85. The VueJS Instance Lifecycle (3:11)
86. The VueJS Instance Lifecycle in Practice (5:39)
87. Wrap Up (0:54)
88. Useful Resources & Links (1:00)

Section: Moving to a "Real" Development Workflow with Webpack and Vue CLI

89. Module Introduction (1:33)
90. Why do we need a Development Server? (2:47)
91. What does "Development Workflow" mean? (3:51)
92. Using the Vue CLI to create Projects (2:35)
93. Installing the Vue CLI and Creating a new Project (4:17)
94. An Overview over the Webpack Template Folder Structure (3:40)
95. Understanding ".vue" Files (6:45)
96. Understanding the Object in the Vue File (1:11)
97. How to Build your App for Production (0:49)
98. More about ".vue" Files & the CLI (1:00)
99. Debugging VueJS Projects (1:00)
100. Wrap Up (1:11)

Section: An Introduction to Components

101. Module Introduction (1:04)
102. An Introduction to Components (4:56)
103. Storing Data in Components with the Data Method (4:03)
104. Registering Components Locally and Globally (2:50)
105. The "Root Component" in the App.vue File (3:21)
106. Creating a Component (4:24)
107. Using Components (5:32)
108. Assignment: Components Basics (Problem) (1:44)
109. Assignment: Components Basics (Solution) (2:12)
110. Moving to a Better Folder Structure (2:42)
111. How to Name your Component Tags (Selectors) (4:31)
112. Scoping Component Styles (5:04)
113. Wrap Up (0:50)
114. Useful Resources & Links (1:00)

Section: Communicating between Components

115. Module Introduction (0:45)
116. Communication Problems (2:52)
117. Using Props for Parent => Child Communication (3:10)
118. Naming "props" (1:09)
119. Using "props" in the Child Component (1:28)
120. Validating "props" (4:56)
121. Using Custom Events for Child => Parent Communication (5:55)
122. Understanding Unidirectional Data Flow (1:07)
123. Communicating with Callback Functions (2:23)
124. Communication between Sibling Components (6:24)
125. Using an Event Bus for Communication (5:31)
126. Centralizing Code in an Event Bus (2:14)
127. Assignment: Component Communication (Problem) (3:06)
128. Assignment: Component Communication (Solution) (10:17)
129. Wrap Up (0:40)
130. Useful Resources & Links (1:00)

Section: Advanced Component Usage

131. Module Introduction (0:38)
132. Setting up the Module Project (3:00)
133. Passing Content - The Suboptimal Solution (2:19)
134. Passing Content with Slots (0:42)
135. How Slot Content gets Compiled and Styled (3:02)
136. Using Multiple Slots (Named Slots) (2:49)
137. Default Slots and Slot Defaults (2:01)
138. A Summary on Slots (0:45)
139. Switching Multiple Components with Dynamic Components (5:31)
140. Understanding Dynamic Component Behavior (2:07)
141. Keeping Dynamic Components Alive (0:58)
142. Dynamic Component Lifecycle Hooks (1:17)
143. Assignment: Advanced Components (Problem) (1:27)
144. Assignment: Advanced Components (Solution) (3:00)
145. Wrap Up (1:10)
146. Useful Resources & Links (1:00)

Section: Second Course Project - Wonderful Quotes

147. Module Introduction (1:35)
148. Setting up the Project (1:21)
149. Initializing the Application (1:28)
150. Creating the Application Components (4:03)
151. Passing Data with Props and Slots (2:13)
152. Allowing Users to Create Quotes with a NewQuote Component (4:08)
153. Adding Quotes with Custom Events (3:34)
154. Adding a Info Box (1:05)
155. Allowing for Quote Deletion (2:40)
156. Controlling Quotes with a Progress Bar (3:51)
157. Finishing Touches and State Management (2:13)
158. Useful Resources & Links (1:00)

Section: Handling User Input with Forms

159. Module Introduction (0:53)
160. A Basic Form Binding (3:46)
161. Grouping Data and Pre-Populating Inputs (2:42)
162. Modifying User Input with Input Modifiers (2:58)
163. Binding and Saving Line Breaks (2:52)
164. Using Checkboxes and Saving Data in Arrays (4:05)
165. Using Radio Buttons (2:30)
166. Handling Dropdowns with and (5:09)
167. What v-model does and How to Create a Custom Control (2:49)
168. Creating a Custom Control (Input) (5:13)
169. Submitting a Form (2:07)
170. Assignment: Forms (Problem) (1:29)
171. Assignment: Forms (Solution) (15:17)
172. Wrap Up (0:43)
173. Useful Resources & Links (1:00)

Section: Using and Creating Directives

174. Module Introduction (0:53)
175. Understanding Directives (3:34)
176. How Directives Work - Hook Functions (2:28)
177. Creating a Simple Directive (1:21)
178. Passing Values to Custom Directives (1:08)
179. Passing Arguments to Custom Directives (2:40)
180. Modifying a Custom Directive with Modifiers (2:24)
181. Custom Directives - A Summary (0:28)
182. Registering Directives Locally (1:37)
183. Using Multiple Modifiers (4:27)
184. Passing more Complex Values to Directives (2:13)
185. Assignment: Directives (Problem) (0:54)
186. Assignment: Directives (Solution) (5:54)
187. Wrap Up (0:44)
188. Useful Resources & Links (1:00)

Section: Improving your App with Filters and Mixins

189. Module Introduction (0:45)
190. Creating a Local Filter (4:32)
191. Global Filters and How to Chain Multiple Filters (1:44)
192. An (often-times better) Alternative to Filters: Computed Properties (5:14)
193. Understanding Mixins (2:23)
194. Creating and Using Mixins (2:25)
195. How Mixins get Merged (2:57)
196. Creating a Global Mixin (Special Case!) (3:25)
197. Mixins and Scope (2:33)
198. Assignments: Filters & Mixins (Problem) (1:08)
199. Assignments: Filters & Mixins (Solution) (8:12)
200. Wrap Up (1:56)
201. Useful Resources & Links (1:00)

Section: Adding Animations and Transitions

202. Module Introduction (1:08)
203. Understanding Transitions (1:01)
204. Preparing Code to use Transitions (3:11)
205. Setting Up a Transition (3:08)
206. Assigning CSS Classes for Transitions (2:27)
207. Creating a "Fade" Transition with the CSS Transition Property (3:21)
208. Creating a "Slide" Transition with the CSS Animation Property (3:58)
209. Mixing Transition and Animation Properties (3:31)
210. Animating v-if and v-show (0:33)
211. Setting Up an Initial (on-load) Animation (1:30)
212. Using Different CSS Class Names (4:01)
213. Using Dynamic Names and Attributes (2:32)
214. Transitioning between Multiple Elements (Theory) (0:33)
215. Transitioning between Multiple Elements (Practice) (4:42)
216. Listening to Transition Event Hooks (2:05)
217. Understanding JavaScript Animations (8:03)
218. Excluding CSS from your Animation (1:27)
219. Creating an Animation in JavaScript (6:18)
220. Animating Dynamic Components (5:57)
221. Animating Lists with "transition-group" (0:43)
222. Using "transition-group" - Preparations (4:19)
223. Using "transition-group" to Animate a List (6:12)
224. Understanding the App (1:14)
225. Creating the App (12:04)
226. Adding Animations (6:38)
227. Wrap Up (1:03)
228. Useful Resources & Links (1:00)

Section: Connecting to Servers via Http - Using vue-resource

229. Module Introduction (1:42)
230. Accessing Http via vue-resource - Setup (4:00)
231. Creating an Application and Setting Up a Server (Firebase) (5:24)
232. POSTing Data to a Server (Sending a POST Request) (6:10)
233. GETting and Transforming Data (Sending a GET Request) (6:54)
234. Configuring vue-resource Globally (2:48)
235. Intercepting Requests (3:33)
236. Intercepting Responses (2:51)
237. Where the "resource" in vue-resource Comes From (4:42)
238. Creating Custom Resources (2:38)
239. Resources vs "Normal" Http Requests (0:27)
240. Understanding Template URLs (5:05)
241. Wrap Up (1:42)
242. Useful Resources & Links (1:00)

Section: Routing in a VueJS Application

243. Module Introduction (1:37)
244. Setting up the VueJS Router (vue-router) (2:16)
245. Setting Up and Loading Routes (6:43)
246. Understanding Routing Modes (Hash vs History) (4:14)
247. Navigating with Router Links (3:45)
248. Where am I? - Styling Active Links (3:20)
249. Navigating from Code (Imperative Navigation) (2:42)
250. Setting Up Route Parameters (1:59)
251. Fetching and Using Route Parameters (2:03)
252. Reacting to Changes in Route Parameters (3:04)
253. vue-router 2.2: Extract Route Params via "props" (1:00)
254. Setting Up Child Routes (Nested Routes) (4:39)
255. Navigating to Nested Routes (3:09)
256. Making Router Links more Dynamic (2:04)
257. A Better Way of Creating Links - With Named Routes (3:21)
258. Using Query Parameters (2:54)
259. Multiple Router Views (Named Router Views) (3:27)
260. Redirecting (2:13)
261. Setting Up "Catch All" Routes / Wildcards (1:05)
262. Animating Route Transitions (2:34)
263. Passing the Hash Fragment (3:28)
264. Controlling the Scroll Behavior (3:21)
265. Protecting Routes with Guards (1:12)
266. Using the "beforeEnter" Guard (7:50)
267. Using the "beforeLeave" Guard (3:31)
268. Loading Routes Lazily (7:08)
269. Wrap Up (1:02)
270. Useful Resources & Links (1:00)

Section: Better State Management with Vuex

271. Module Introduction (1:12)
272. Why a Different State Management May Be Needed (2:24)
273. Understanding "Centralized State" (1:32)
274. Using the Centralized State (6:49)
275. Why a Centralized State Alone Won't Fix It (2:41)
276. Understanding Getters (0:48)
277. Using Getters (2:40)
278. Mapping Getters to Properties (6:57)
279. Understanding Mutations (1:14)
280. Using Mutations (4:50)
281. Why Mutations have to run Synchronously (1:34)
282. How Actions improve Mutations (1:32)
283. Using Actions (4:59)
284. Mapping Actions to Methods (4:57)
285. A Summary of Vuex (4:13)
286. Two-Way-Binding (v-model) and Vuex (5:56)
287. Improving Folder Structures (1:01)
288. Modularizing the State Management (4:56)
289. Using Separate Files (4:17)
290. Using Namespaces to Avoid Naming Problems (6:44)
291. Wrap Up (0:50)
292. Useful Resources & Links (1:00)

Section: Final Project - The Stock Trader

293. Project Introduction (3:11)
294. Project Setup and Planning (2:45)
295. Creating the First Components (2:55)
296. Setup Project Routes (4:42)
297. Adding a Header and Navigation (6:43)
298. Planning the Next Steps (1:21)
299. Creating Stocks Components (6:31)
300. Adding a "Buy" Button (5:56)
301. Setting up the Vuex State Management (10:20)
302. Adding a Portfolio Module to Vuex (10:02)
303. Working on the Portfolio Stocks (6:51)
304. Connecting the Portfolio with Vuex (2:21)
305. Time to fix some Errors (2:00)
306. Displaying the Funds (3:41)
307. Adding some Order Checks (5:40)
308. Making Funds Look Nicer with Filters (1:47)
309. Ending the Day - Randomizing Stocks (5:30)
310. Animating the Route Transitions (3:14)
311. Saving & Fetching Data - Adding a Dropdown (2:17)
312. Setting up vue-resource and Firebase (2:15)
313. Saving Data (PUT Request) (2:51)
314. Fetching Data (GET Request) (5:03)
315. Testing and Bug Fixes (2:50)
316. Project Wrap Up (1:21)
317. Bonus: Debugging Vuex with Vue Developer Tools (1:59)
318. Useful Resources & Links (1:00)

Section: Deploying a VueJS Application

319. Module Introduction (1:12)
320. Preparing for Deployment (1:45)
321. Deploying the App (Example: AWS S3) (5:57)

Section: Bonus: Using Axios instead of vue-resource

322. About this Section (0:37)
323. Module Introduction (1:07)
324. Project Setup (2:45)
325. Axios Setup (2:11)
326. Sending a POST Request (5:39)
327. Sending a GET Request (2:52)
328. Accessing & Using Response Data (5:48)
329. Setting a Global Request Configuration (5:43)
330. Using Interceptors (5:49)
331. Custom Axios Instances (4:56)
332. Wrap Up (0:58)
333. Useful Resources & Links (1:00)

Section: Bonus: Authentication in Vue Apps

334. About this Section (0:52)
335. Module Introduction (1:59)
336. How Authentication Works in SPAs (3:10)
337. Project Setup (4:35)
338. Adding User Signup (5:14)
339. Adding User Signin (Login) (2:41)
340. Using Vuex to send Auth Requests (4:26)
341. Storing Auth Data in Vuex (3:45)
342. Accessing other Resources from Vuex (8:41)
343. Sending the Token to the Backend (5:37)
344. Protecting Routes (Auth Guard) (2:48)
345. Updating the UI State (based on Authentication State) (3:00)
346. Adding User Logout (5:01)
347. Adding Auto Logout (5:35)
348. Adding Auto Login (10:36)
349. Wrap Up (1:01)
350. Useful Resources & Links (1:00)

Section: Bonus: Form Input Validation

351. About this Section (0:57)
352. Module Introduction (1:04)
353. Installing Vuelidate (2:03)
354. Adding a Validator (10:14)
355. Adding Validation UI Feedback (4:55)
356. Controlling Styles for Invalid Entries (2:10)
357. More Validators (6:33)
358. Validating Passwords For Equality (6:15)
359. Using the Required-Unless Validator (4:52)
360. Validating Arrays (7:19)
361. Controlling the Form Submit Button (2:11)
362. Creating Custom Validators (2:46)
363. Async Validators (9:16)
364. Wrap Up (1:05)
365. Useful Resources & Links (1:00)

Section: Bonus: Vue CLI 3+

366. About Vue CLI 3+ (1:00)
367. Module Introduction (3:18)
368. Creating a Project (4:41)
369. Analyzing the Created Project (4:49)
370. Using Plugins (4:05)
371. CSS Pre-Processors (3:14)
372. Environment Variables (7:28)
373. Building the Project (3:43)
374. Instant Prototyping (2:39)
375. Different Build Targets (8:39)
376. Using the "Old" CLI Templates (vue init) (1:19)
377. Using the Graphical User Interface (GUI) (5:05)
378. Alternative Lazy Loading Syntax (1:00)

Section: Roundup

379. Course Roundup (0:58)

Section: Vue 2 to Vue 3 Migration

380. Vue 3 - Overview (6:30)
381. Important Changes & Migration Steps (17:51)
382. Vue 3: New Features (5:27)
383. The New Composition API (Optional!) (23:45)
384. About this Course & Vue 3 (1:00)

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.