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
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 |
Comments
0 commentsSimilar courses
Interactive Vue.js Resume Builder
Sources: fullstack.io
“Word” or “PDF” resume pfft! You’re better than that and you know it. In this course, you will create a customizable developer resume from scratch in Vue.js wit
3 hours 33 minutes 1 second
The Vue 3 Bootcamp - The Complete Developer Guide
Sources: udemy
In this course we will take you from a Vue 3 novice to a job ready engineer. This course is loaded with practical projects and examples so that you can truly un
17 hours 31 minutes 14 seconds
Advanced Shopify Theme Development: Liquid + Vue.js (v3.0)
Sources: udemy
Learn to build Shopify themes using Liquid, JavaScript, and Vue.js v3.0 from scratch. No experience required! Who is the course for? Anyone who is looking to b
6 hours 37 minutes 49 seconds
Vue Component Design: Master Scalable Vue.js Patterns
Sources: vueschool.io
Creating scalable Vue components requires not only technical knowledge but also the ability to apply time-tested patterns, tested in...
54 minutes 42 seconds
Want to join the conversation?
Sign in to comment