Mastering Nuxt 3
The complete guide to developing and deploying fast, production-ready Nuxt apps. MasteringNuxt is the biggest and most in-depth, fun, and realistic course ever made on Nuxt.js.
More
An Introduction to Mastering Nuxt 3
The team behind Nuxt 3 and the Mastering Nuxt 3 course share their insights into the journey of creating Nuxt and the ultimate guide to learning the platform. The video includes the team from NuxtLabs, Vue School and Mastering Nuxt. Discover the epic path that has lead the launch of the course.
Build awesome websites
Learn how to build robust, modern websites with Nuxt from scratch. Or improve your website performance, code quality, while making better use of the framework.
Learn the best practises, common pitfalls to avoid, and tons of tips and tricks. Prior experience with Nuxt is beneficial but not required.
Nuxt.js is a modular framework built on top of the easiest web development framework in 2020 Vue.js. It allows developers of any kind to create elegant websites progressively. We see huge enterprise companies and governments using Nuxt to build websites quickly — very important especially during the pandemic. We also see solo devs building exceptional side projects with Nuxt.
What you will build
Learn the best practises, common pitfalls to avoid, and tons of tips and tricks
Get to grips with building your own online course and database, and then build a blazing-fast landing page to sell your course. Explore technologies like VueUse, Nuxt, Vue.js.
Who is this for?
The course is for anyone that wants to learn how to build professional websites!
You just need to be interested in learning Nuxt. No matter what level you’re at you can learn at your own pace and become a master in Nuxt with this course.
Senior Developers - develop full-blown, performant Vue and Nuxt 3 applications.
Junior Developers - build your first state-of-the-art website using Nuxt 3 and the best practices. Avoid common gotchas in learning and get ahead of the herd.
Students - start learning a new skill and join the global community of Nuxt developers. You can add the Mastering Nuxt 3 project to your portfolio and GitHub.
Business & Agencies - some of the largest business and agencies use Nuxt because it makes building modern websites easy and quick. Agencies also appreciate the great performance and SEO that Nuxt comes with.
Watch Online Mastering Nuxt 3
| # | Title | Duration |
|---|---|---|
| 1 | Course Introduction | 02:06 |
| 2 | Building our MVP | 00:36 |
| 3 | Getting Set Up | 07:41 |
| 4 | File based routing | 06:11 |
| 5 | Displaying Course Lessons | 03:57 |
| 6 | Nested Routes | 05:52 |
| 7 | Dynamic Routes | 09:06 |
| 8 | Loading in Course Data | 06:12 |
| 9 | Update Lesson Styling | 01:03 |
| 10 | Add VideoPlayer Component | 02:55 |
| 11 | What is Universal Rendering | 05:18 |
| 12 | Navigating with NuxtLink | 04:16 |
| 13 | More with Nuxt Links | 04:55 |
| 14 | useHead composable | 03:12 |
| 15 | Tracking progress with useState | 09:26 |
| 16 | Saving our course progress | 10:35 |
| 17 | Deploying our MVP to Netlify | 10:52 |
| 18 | Chapter 1 - Summary | 00:47 |
| 19 | Organizing our Code | 01:02 |
| 20 | Smaller is better | 03:45 |
| 21 | Understanding App.vue | 01:56 |
| 22 | Understanding Layouts | 08:22 |
| 23 | Pages vs. Layouts vs. Components | 11:32 |
| 24 | Understanding Composables in Nuxt | 03:24 |
| 25 | Chapter 2 - Summary | 00:32 |
| 26 | Making Our App Robust | 00:37 |
| 27 | Adding in TypeScript | 05:56 |
| 28 | Adding a 404 page | 02:36 |
| 29 | Handling Client-Side Errors with NuxtErrorBoundary | 08:39 |
| 30 | Advanced Error Handling | 06:27 |
| 31 | Handling Sever-Side Errors | 05:59 |
| 32 | Route Validation | 03:20 |
| 33 | Chapter 3 - Summary | 00:39 |
| 34 | 4-Intro | 01:34 |
| 35 | 4-1 Route Middleware Basics | 05:55 |
| 36 | 4-2 Creating a Login Page | 06:05 |
| 37 | 4-3 Inline, Named, and Global Route Middleware | 11:25 |
| 38 | 4-4 Setting Up Supabase | 08:31 |
| 39 | 4-5 Adding Environment Variables | 08:13 |
| 40 | 4-6 Logging in with Github | 07:58 |
| 41 | 4-7 Logging Out | 06:43 |
| 42 | 4-8 Protecting Routes with Auth | 07:04 |
| 43 | 4-9 Understanding OAuth Basics | 17:47 |
| 44 | 4-Summary | 00:45 |
| 45 | 5-1 Server Route Basics | 10:57 |
| 46 | 5-2 Lesson Endpoint | 10:22 |
| 47 | 5-3 Fully Typing Our Endpoint | 10:18 |
| 48 | 5-4 Course Metadata Endpoint | 11:33 |
| 49 | 5-5 Basic Data Fetching | 12:54 |
| 50 | 5-6 Advanced Data Fetching | 14:49 |
| 51 | 5-7 Creating the useFetchWithCache Composable | 07:50 |
| 52 | 5-8 Fetch Course Metadata | 09:56 |
| 53 | 5-9 Setting up Prisma | 14:43 |
| 54 | 5-10 Creating the Prisma Schema | 10:54 |
| 55 | 5-11 Initialize Prisma and Seed Database | 15:47 |
| 56 | 5-12 Getting data from Prisma | 07:22 |
| 57 | 5-13 Update Lesson Endpoint | 05:25 |
| 58 | 5-14 Update Course Meta Endpoint | 12:26 |
| 59 | 5-15 Auth and Server Routes | 15:53 |
| 60 | 5-16 Understanding Nitro and h3 | 14:23 |
| 61 | 5-Summary | 00:35 |
| 62 | 6-Intro | 00:38 |
| 63 | 6-1 Setting up Pinia | 12:03 |
| 64 | 6-2 Fixing the Meta Endpoint | 05:57 |
| 65 | Add LessonProgress Model to Our Schema | 05:10 |
| 66 | 6-4 Add Endpoint to Update Progress | 12:20 |
| 67 | 6-5 Add User Progress Endpoint | 11:05 |
| 68 | 6-6 Show Course Completion Percentage | 10:17 |
| 69 | 6-Summary | 00:44 |
| 70 | 7-Intro | 00:41 |
| 71 | 7-1 Adding the Landing Page | 07:18 |
| 72 | 7-2 Static Generation and Pre-Rendering | 10:34 |
| 73 | 7-3 Route Rules | 04:19 |
| 74 | 7-4 Managing Static Assets | 12:35 |
| 75 | 7-5 Lazy Loading Checkout Components | 04:14 |
| 76 | 7-6 Runtime Config and App Config | 04:35 |
| 77 | 7-7 Setting up Stripe | 06:06 |
| 78 | 7-8 Handle Payments with Stripe | 08:27 |
| 79 | 7-9 Add the PaymentIntent Endpoint | 08:23 |
| 80 | 7-10 Overview of Granting Access | 05:16 |
| 81 | 7-11 Create CoursePurchase in the Database | 04:25 |
| 82 | 7-12 Verify Purchase with Stripe Webhooks | 06:58 |
| 83 | 7-13 Testing our Webhook Handler | 09:19 |
| 84 | 7-14 Link Purchase with Github | 08:39 |
| 85 | 7-15 Grant Access to the Course | 07:30 |
| 86 | 7-Summary | 00:39 |
Similar courses to Mastering Nuxt 3
Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)
PWA with Vue JS, Quasar & Firebase (with NodeJS & Express)
Material UI with Vuetify and Vue.js
