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

28h 45m 29s
English
Paid
October 30, 2024

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!

More

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

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

Join premium to watch
Go to premium
# Title Duration
1 Welcome to the Course! 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

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

TypeScript with Vue.js 3

TypeScript with Vue.js 3

Duration 1 hour 37 minutes 47 seconds
Build a Server Rendered Vue.js App with Nuxt and Vuex
Material UI with Vuetify and Vue.js

Material UI with Vuetify and Vue.js

Duration 1 hour 40 minutes 10 seconds
Vue 3, Nuxt.js and Laravel: A Practical Guide

Vue 3, Nuxt.js and Laravel: A Practical Guide

Duration 10 hours 17 minutes 9 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2024

100 Days Of Code: The Complete Web Development Bootcamp 2024

Duration 78 hours 51 minutes 55 seconds
Vue 3 Composition API 3

Vue 3 Composition API 3

Duration 1 hour 59 minutes 20 seconds