CF

The Nuxt 3 Bootcamp The Complete Developer Guide

16h 52m 7s
English
Paid

This is the most comprehensive Nuxt 3 course on the market. You will learn many of Nuxt's incredible features while building six real-world projects. With each new project, we will delve into more and more advanced Nuxt 3 concepts. By the end of the course, you can proudly label yourself as a Nuxt expert!

Course Introduction

In the introduction, you will learn precisely what Nuxt is and the problems it solves. You will explore client-side rendering and compare it with universal rendering.

Project 1: Vue 3 Refresher

In the first project, we will refresh your Vue 3 knowledge by building an app with the composition API. We will also cover TypeScript and how Nuxt handles components.

Project 2: Exploring Nuxt Ecosystem

In the second project, we will dive deeper into the Nuxt ecosystem. You'll learn about file-based routing, layouts, and defining page metadata.

Project 3: State Management with Composables

In the third project, we will explore global state management using composables.

Project 4: Handling HTTP Requests

In project number four, you will learn how to make HTTP requests using useFetch and useAsyncData.

Project 5: Building a REST API

In the fifth project, we will harness Nuxt's capabilities to build our very own REST API and utilize it on the client side.

Project 6: Integrating with Supabase

Lastly, in the sixth project, we will integrate our app with Supabase to leverage its authentication and SQL database services.

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: What We Will Be Building
All Course Lessons (155)
#Lesson TitleDurationAccess
1
What We Will Be Building Demo
01:24
2
Your Two Options
02:16
3
Creating a Nuxt App
04:07
4
Adding Tailwind CSS
04:42
5
Building the NavBar
03:55
6
Building the Home Hero
06:49
7
Building the Search Bar
04:36
8
Building the Side Bar
10:29
9
Building the Car Card
04:59
10
Building the Car Details Page
11:58
11
Intro to File Based Routing
07:00
12
Auto Importing Components
07:01
13
Dynamic and Optional Paths
07:16
14
Filling the Page With Components
03:17
15
Unique Dynamic Paths
05:45
16
The NuxtLink Component
02:17
17
Adding Programmatic Navigation
05:16
18
Implementing Nested Pages
05:25
19
Change Titles With useHead
07:13
20
Defining a Default Layout
06:17
21
Defining a Custom Layout
05:22
22
Storing Common Functionality in Composables
02:44
23
Adding a Page Not Found Page
05:34
24
The useError Composable
01:52
25
Dynamically Rendering the Car Cards
05:56
26
Dynamically Rendering the Car Details Page
06:51
27
Throwing a Custom Server Error
03:48
28
How Nuxt Renders Content
12:00
29
Updating the Location
07:06
30
Throwing a Client Side Error
03:12
31
NuxtErrorBoundary to Handle Client Side Errors
05:53
32
Optimizing Images with NuxtImg
04:50
33
The useState Composable
06:24
34
Adding the Vueuse Module
10:14
35
Forcing Client Side Rendering
04:09
36
Adding the Car Make Filter
09:31
37
Adding the Car Price Filter
16:11
38
Our New Feature
03:32
39
[OPTIONAL] - Assembling the Pages
47:09
40
Creating a Supabase Account
02:49
41
Connecting Supabase to Our Nuxt App
04:00
42
Enabling Google Authentication
04:22
43
Implementing Google OAuth
08:10
44
Conditionally Rendering UI Based on Auth Status
03:27
45
Implementing the Logout Functionality
06:20
46
Protecting Routes With Inline Route Middleware
08:23
47
Named Middleware For DRY Code
02:47
48
Global Middleware for DRYER Code
03:17
49
Intro to Server Endpoints
01:46
50
Creating a Server Endpoint
03:12
51
Extracting the Path Parameters
04:00
52
Extracting the Query Parameters
04:03
53
Fetching the Data From the Client
09:22
54
A Hacky Way of Refetching Data
03:12
55
Adding a Not Found Message for Better UI
02:00
56
Adding the Fetch Car Endpoint
07:18
57
Another Fetch Composable
03:47
58
Fixing an Issue With Error Handling
01:46
59
A Small SQL Crash Course
06:00
60
Installing an ORM
05:07
61
Programmatically Creating Our Tables
08:29
62
A Perfect Endpoint
22:03
63
HTTP Verbs
03:12
64
Fetching Data From the Database
05:13
65
Deleting Data From the Database
02:49
66
Adding the Other Two Endpoints
11:36
67
Complex Filters
08:11
68
Our Last Endpoint
01:27
69
Making a POST Request From the Client
15:52
70
Making a GET Request From the Client
01:27
71
Making a DELETE Request From the Client
08:21
72
Fixing the GET Endpoints
04:39
73
A POST Message Endpoint
09:16
74
A GET Message Endpoint
03:08
75
Storing Images in a Bucket
08:36
76
Retrieving the Image URL
05:39
77
Please Watch This
02:04
78
Introduction to Nuxt and it's Benefits
04:32
79
Client-Side vs Server-Side vs Universal Rendering
04:35
80
Pros and Cons of Client-Side and Universal Rendering
04:31
81
Course Prerequisite
03:08
82
App Overview
02:53
83
Creating a Nuxt App
03:17
84
Exploring the Boilerplate
04:36
85
Building the Boilerplate HTML
04:49
86
Styling Our App
09:18
87
Managing State
07:47
88
A Little Bit of TypeScript
13:02
89
Updating Our State After a Click Event
02:50
90
Adding the Names Array
07:53
91
Computing Names Based on Options
06:21
92
Creating the Name Cards
06:14
93
Working with Components
10:04
94
Passing Props to the Components
10:13
95
Computing the Class Names
07:34
96
Dealing with Nested Components
06:15
97
Emitting Events to the Parent Component
06:18
98
App Overview
04:43
99
Adding Bootstrap Globally
06:52
100
Creating the Landing Page
06:37
101
Adding Pages into Our App
06:15
102
Building the Restaurant Page
09:27
103
Adding the Restaurant Page Logic
11:00
104
Dynamic and Nest Routes
07:23
105
Extracting Path Parameters
08:56
106
Catching the Not Found Error
02:20
107
Defining the Default Layout
03:41
108
Creating a Custom Page Layout
08:30
109
Injecting Custom Elements to Layout Page
10:32
110
Option 1: Using Components
06:43
111
Option 2: Using Composables
03:24
112
App Overview
02:25
113
Approaches to State Management
06:54
114
Creating Our First Composable
06:09
115
Using the Compasable State
06:40
116
Mutating Our Global State
03:17
117
App Overview
04:37
118
Integrating Tailwind
08:11
119
Writing the HTML Structure
11:20
120
The Basics of HTTP Requests
04:07
121
The useFetch Composable
08:45
122
Refetching Data with useFetch
05:45
123
The useAsyncData Composable
08:10
124
Refetching Data with useAsyncData
02:13
125
Storing Data in the Browser with Cookies
02:19
126
The useCookie Composable
04:58
127
Storing Runtime Configs
08:21
128
Error Handling
06:52
129
App Overview
03:09
130
Our Endpoints
02:17
131
Creating Our Server
07:01
132
GET Requests
05:51
133
POST Requests and Body
07:07
134
PUT & DELETE with Dynamic Endpoints
15:44
135
Error Handling
06:39
136
Building the HTML
08:20
137
Making POST, PUT, DELETE Requests From the Frontend
08:54
138
Organizing Code in Composable
07:16
139
App Overview
03:26
140
Building the Authentication Card
12:42
141
Conditionally Displaying Signup or Signin Form
05:54
142
Creating a Supabase Account and Project
04:53
143
Connect Nuxt to Supabase
05:41
144
Implementing Signup Logic
12:24
145
Implementing Signin/Login Logic
05:50
146
Implementing Signout/Logout Logic
05:31
147
Handling Authentication Errors
04:15
148
Redirecting to Profile Page
07:25
149
Creating the Nav Component
09:28
150
Conditionally Render UI Elements Based on Auth Status
02:40
151
Protecting Routes with Middleware
09:57
152
Creating the Note Form
10:43
153
The Basics of SQL
09:48
154
Saving Data to the Database
05:59
155
Accessing Data From the Database
08:07
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 prerequisites should I have before taking this course?
Before enrolling in this Nuxt 3 course, you should have a good understanding of Vue 3, as the first project serves as a refresher on Vue 3 using the composition API. Familiarity with TypeScript will also be beneficial since it is covered in the initial project. Basic knowledge of web development and JavaScript is recommended to fully benefit from the course material.
What kind of projects will I build in this course?
Throughout the course, you will build six real-world projects. These include refreshing your Vue 3 skills, exploring Nuxt's ecosystem, managing global state with composables, handling HTTP requests, building a REST API, and integrating with Supabase for authentication and database services. Each project is designed to introduce and deepen your understanding of specific Nuxt 3 features and capabilities.
Who is the target audience for this course?
This course is aimed at developers who have a foundational understanding of Vue and wish to expand their skills with Nuxt 3. It is suitable for those interested in creating server-rendered applications and looking to leverage Nuxt's powerful ecosystem. Developers who want to gain practical experience through building projects and wish to become proficient in Nuxt are ideal candidates for this course.
How does the depth of this course compare to other Nuxt courses?
This course offers an extensive exploration of Nuxt 3, covering a wide range of topics through its six projects. It delves into advanced concepts like state management with composables, building REST APIs, and integrating with third-party services such as Supabase. It is designed to take you from basic concepts to advanced proficiency, making it one of the more comprehensive options available for learning Nuxt 3.
What specific tools or platforms will I learn to use in this course?
In this course, you will learn to use a variety of tools and platforms including Tailwind CSS for styling, Supabase for authentication and database services, and composables for state management. The course also covers Nuxt-specific tools like useFetch and useAsyncData for handling HTTP requests, and useHead for dynamic title management.
What topics are not covered in this course?
The course does not cover server-side rendering or other JavaScript frameworks outside of Vue 3 and Nuxt 3. While it provides a thorough grounding in Nuxt 3, it does not delve into general web development topics such as SEO optimization or advanced JavaScript patterns beyond those used in the context of Nuxt applications.
What is the time commitment for this course?
The course consists of 155 lessons. The exact time commitment will vary based on individual learning pace, but the course is structured to be comprehensive and detailed, allowing for deep dives into each topic with practical project applications. Students should be prepared to spend significant time beyond watching the lessons, practicing the concepts and completing the projects.