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
By connecting students all over the world to the best instructors, Udemy is helping individuals reach their goals and pursue their dreams. Udemy is the leading global marketplace for teaching and learning, connecting millions of students to the skills they need to succeed. Udemy helps organizations of all kinds prepare for the ever-evolving future of work. Our curated collection of top-rated business and technical courses gives companies, governments, and nonprofits the power to develop in-house expertise and satisfy employees’ hunger for learning and development.

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