The Nuxt 3 Bootcamp The Complete Developer Guide

16h 52m 7s
English
Paid
October 30, 2024

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!

More

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 The Nuxt 3 Bootcamp The Complete Developer Guide

Join premium to watch
Go to premium
# Title Duration
1 What We Will Be Building 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

Similar courses to The Nuxt 3 Bootcamp The Complete Developer Guide

Real-time chat with Node.js, Socket.io and Vue.js
Testing Vue.js Components

Testing Vue.js Components

Duration 1 hour 6 minutes 20 seconds
Nuxt Tips Collection
A “Wordle” on Test Driven Development in Vue.js

A “Wordle” on Test Driven Development in Vue.js

Duration 2 hours 48 minutes 45 seconds
Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)

Duration 19 hours 57 minutes 29 seconds