The Nuxt 3 Bootcamp The Complete Developer Guide

16h 52m 7s
English
Paid

Course description

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

Read more about the course

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

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

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

In the third project, we will learn all about how we can globally manage state with composables.

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

In the fifth project, we will leverage the powers of Nuxt to build our very own REST API and utilizing it in the client.

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

Watch Online

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

Watch Online The Nuxt 3 Bootcamp The Complete Developer Guide

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Paginated Vue Components with Laravel

Paginated Vue Components with Laravel

Sources: Codecourse
Want flexible paginated Vue components that work with any data? Let's make this easy.
52 minutes 56 seconds
The Ultimate Guide to Vue Performance

The Ultimate Guide to Vue Performance

Sources: vueschool.io
In today's world, the performance of web applications is of paramount importance. In this course, you will learn how to maintain the speed of your Vue...
2 hours 31 minutes 10 seconds