CF

The Vue 3 Bootcamp - The Complete Developer Guide

17h 31m 14s
English
Paid

Embark on your journey from a Vue 3 novice to a job-ready engineer with our comprehensive course. Packed with practical projects and examples, you'll gain a deep understanding of Vue 3 and the composition API.

Course Projects

Throughout the course, we will build five projects, each becoming increasingly complex. Our final project will be an Instagram clone featuring functionalities such as file upload and user authentication. By completing this course, you'll have a portfolio of practical examples to demonstrate your skills!

What You'll Learn

Throughout this course, you will gain proficiency in the following areas:

  • Understanding the difference between pure Vanilla JS and Vue 3
  • Mastering the composition API – experience a 100% composition API-focused course without options API
  • Leveraging important Vue directives for conditional rendering and list rendering
  • Fetching data from an external API while managing success, loading, and error states
  • Handling user authentication
  • Building a Postgres database capable of managing complex relations
  • Using TypeScript to write bug-free code
  • Exploring essential techniques for state management (pinia, composables, inject/eject, ref, reactive)
  • Animating and transitioning UI applications
  • Storing and retrieving images from a bucket
  • Implementing scroll-based pagination using the Observer Intersection API

About the Author: Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

Watch Online 155 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: Introduction
All Course Lessons (155)
#Lesson TitleDurationAccess
1
Introduction Demo
03:06
2
A Little Bit of Setup
03:42
3
What is VueJS
02:41
4
Building the HTML Template
04:19
5
Styling Our App With CSS
03:27
6
Making it Functional With JavaScript
09:12
7
Creating a Vue App
04:03
8
Rebuilding the App in Vue
08:08
9
Vue vs Vanilla JS
04:21
10
Installing Needed Dependencies
09:05
11
Spinning Up a Vue Development Server
04:52
12
Some Important Terminologies
05:07
13
Creating HTML With Vue Templates
06:11
14
Styling Our App
05:07
15
Accessing Variables Within Our HTML
04:16
16
Adding Event Handlers
05:48
17
Defining Our Variable as State
06:27
18
Composition API vs Options API
08:32
19
App Overview
02:34
20
[OPTIONAL] Building the HTML and CSS
19:12
21
Conditional Rendering With v-if
08:21
22
Two Way Binding With v-model
06:26
23
Event Handling By Creating a New Note
10:44
24
Iteratively Rendering DOM Elements With v-for
08:53
25
The Importances of a Key
04:16
26
Adding Error Handling
09:33
27
App Overview
03:26
28
[OPTIONAL] The HTML and CSS
10:59
29
List Card Rendering
05:10
30
Watching For State Changes
06:09
31
Separating Our Code Into Components
09:49
32
Passing Data to Components via Props
06:02
33
Introduction to Routing
04:25
34
Creating a New App
02:35
35
Creating Two View Components
03:26
36
Adding Routing to Our App
10:17
37
RouterLink to Navigate Within the App
07:52
38
Styling the Active RouterLink
03:30
39
Pages With Dynamic Paths
13:05
40
Extracting the Path Params
05:14
41
The Powers of Nested Routes
11:24
42
Programmatically Adjust the Route
05:57
43
Adding 404 Not Found Pages
09:08
44
Redirect Routes
02:16
45
Routing Our Quiz App
12:24
46
Quiz Page HTML and CSS
11:35
47
Separating Code Into Components
05:08
48
Passing Props to the Question Component
08:57
49
Listening to Changes With Watch
07:16
50
Computing Values With State
03:35
51
More Computing...
04:03
52
Passing Data From the Child to the Parent
09:10
53
Emitting an Event From the Child Component
09:22
54
Completing the Quiz
11:44
55
Introduction to Vue Animations
04:12
56
The Transition Component
09:31
57
Animating When a Component Leaves
04:16
58
Conditional Rendering Animations
04:55
59
Building a Small App
11:51
60
TransitionGroup to Animate Multiple Elements
05:17
61
Animating the Other Cards Into Place
03:48
62
Routing Animations
08:17
63
Animating Upon Rendering
06:17
64
Lifecycle Hook of the Transition
06:09
65
Animation Styling With JavaScript
08:02
66
App Overview
01:46
67
The Process of Fetching Data From an API
05:25
68
Creating the App
02:25
69
Where to Fetch the Data
04:44
70
Making the HTTP Requests
09:34
71
The Suspense Component
07:35
72
Request Offsets and Limits
05:59
73
Implementing Paginations
07:00
74
Building the UI
18:03
75
A Little Fix
02:59
76
Component Lifecycle Hooks
10:47
77
Fetching Data With onMounted
07:31
78
Slots For Dynamic HTML
13:34
79
More on Slots
09:09
80
Adding a Better Loading State
06:26
81
Creating the Header Component
10:04
82
Maintaining State With KeepAlive
05:48
83
Introduction to State Management
03:18
84
Building a Small Project
05:50
85
Declaring State With Reactive
03:44
86
Ref vs Reactive
06:52
87
A Lot of Nested Components
06:18
88
Prop Drilling
07:37
89
Provide/Inject
09:02
90
Store Reusable Logic With Composables
07:06
91
Global State With Pinia
13:39
92
An Introduction to TypeScript
09:51
93
An Optional TypeScript Lesson
18:47
94
Building the HTML App
05:17
95
Types With State
05:10
96
Types With Functions
07:56
97
Types With Props
08:38
98
Types With Computed
08:10
99
Reusing Our Types Throughout Multiple Components
03:48
100
Project Overview
03:05
101
Your Two Options
01:37
102
Setting Up the Vue App
07:07
103
Building the NavBar
14:58
104
Building the Modal
13:23
105
Building the Timeline
12:37
106
Adding a Profile View
07:13
107
Adding the User Bar
08:59
108
Adding an Image Gallary
05:17
109
An Introduction to Authentication
01:58
110
Supabase - A Backend as a Service
03:38
111
Connecting Our Vue App to Supabase
04:12
112
Creating a Pinia User Store
04:39
113
Adding Input Validation
14:45
114
Client vs Backend Validation
03:21
115
Signing Up the User
11:42
116
Validating if the User is Already Registered
08:10
117
Improving Error Handing
03:15
118
Adding a Loading State For the Modal
05:31
119
Handling the Success Case
07:34
120
Adding the Login Logic
13:01
121
Persisting the Login State
11:52
122
A Loading State for Retrieving the User
05:38
123
Handling Logout
07:13
124
Navigating to the User's Profile
03:17
125
Conditionally Rendering the Upload Photo Modal
09:54
126
Adding the Input Elements
06:43
127
Creating a Bucket For File Storage
02:52
128
Programmatically Uploading a Photo
06:05
129
Updating the Image Policy
02:50
130
Creating the Posts Table
05:59
131
Adding a Post to Our DB
06:12
132
Adding a Loading State
04:37
133
Handling the Success State
08:10
134
Fetching Posts Upon Render
09:37
135
Adding a Loading State
02:35
136
Building a Following Follower Table
04:50
137
Conditionally Rendering a Follow Button
03:06
138
Making the Profile Component Reactive
01:33
139
Implementing the Follow User Functionality
05:19
140
Determining Follower Info on Render
11:00
141
Implementing the Unfollow Functionality
02:32
142
Toggling the Follow/Following Buttons
02:29
143
Performing Aggregate Queries
07:53
144
Check Auth Status in Timeline Page
06:40
145
Separating HTML into Components
03:54
146
Fetching the Followers
05:28
147
Fetching the Followers' Posts
05:14
148
Rendering the Posts
02:32
149
Sorting By Most Recent
01:43
150
Let's Do Some Math
04:01
151
The Intersection Observer API
08:41
152
Emitting an Event on Intersect
03:42
153
Implementing the Pagination
06:23
154
Stopping Unnecessary HTTP Requests
04:19
155
Saving Data in Environment Variables
05:31
Unlock unlimited learning

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

Learn more about subscription

Related courses

Frequently asked questions

What is The Vue 3 Bootcamp - The Complete Developer Guide about?
Embark on your journey from a Vue 3 novice to a job-ready engineer with our comprehensive course. Packed with practical projects and examples , you'll gain a deep understanding of Vue 3 and the composition API. Course Projects Throughout…
Who teaches this course?
It is taught by Udemy. You can find more courses by this instructor on the corresponding source page.
How long is the course?
It contains 155 lessons with a total runtime of 17 hours 31 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/the-vue-3-bootcamp-the-complete-developer-guide. The page hosts every lesson with the integrated video player; no download is required.