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.
Mastering Nuxt 3
9h 56m 5s
English
Paid
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.
About the Authors
Mastering Nuxt
Mastering Nuxt is the paid course platform built around the Nuxt.js Vue meta-framework, run by Daniel Kelly (Vue Mastery). The platform also covers Next.js as the parallel React framework. Course material is updated as the underlying frameworks evolve — the original Mastering Nuxt 3 course has been rewritten through multiple Nuxt major versions.
The CourseFlix listing carries four Mastering Nuxt courses including Mastering Nuxt, 2025 Edition, Mastering Nuxt 3, the original MASTERING NUXT — Learn Nuxt.js by Building a Real World App, and Mastering Next.js on the React side. Material is paid and aimed at Vue / React developers building real applications with these meta-frameworks.
Vue School
Vue School (vueschool.io) is a Greece-based Vue.js training platform founded by Alex Kyriakidis, an early Vue community member and one of the longest-running independent Vue educators. Vue School operates as both an on-demand course platform and a Vue / Nuxt consulting business, with course material that often emerges from real client engagements.
Course material covers the full Vue ecosystem: Vue 3 fundamentals through advanced Composition API patterns, Nuxt 3 production deployment, Pinia state management, Vue Router, the testing track with Vitest, TypeScript with Vue, real-time features with Pusher / WebSockets, and the broader full-stack Vue work. Vue School also publishes the popular Mastering Pinia course in collaboration with Pinia's author Eduardo San Martín Morote.
The CourseFlix listing under this source carries over 30 Vue School courses spanning that range. Material is paid; Vue School runs on per-course or membership pricing on the original platform. Courses are aimed at Vue developers from beginner through senior level building production Vue applications.
Watch Online 86 lessons
0:00
/ #1: Course Introduction
All Course Lessons (86)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Course Introduction Demo | 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 |
Unlock unlimited learning
Get instant access to all 85 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionRelated courses
-
Updated 1y agoThe Complete Guide to Data Fetching in Nuxt
By: Vue SchoolIn the world of Nuxt, there is a fascinating variety of options for obtaining data in an application.1h 32m -
Updated 2y agoNuxt.js - Vue.js on Steroids
By: UdemyJoin our Nuxt.js course to enhance your Vue.js apps. Learn server-side rendering and build optimized, server-rendered or static Vue applications with ease.6h 27m -
Updated 2y agoVue 3, Nuxt.js and NestJS: A Rapid Guide - Advanced
By: UdemyLearn how to create an Ambassador App using Vue 3, NuxtJS and NestJS. We will build 3 frontend apps Admin, Ambassador and Checkout and they will consume a big N7h 37m
Frequently asked questions
What is Mastering Nuxt 3 about?
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.
Who teaches this course?
It is taught by Mastering Nuxt, Vue School. You can find more courses by these instructors on the corresponding source pages.
How long is the course?
It contains 86 lessons with a total runtime of 9 hours 56 minutes. Every lesson is available to watch online at your own pace.
Is it free to watch?
It is part of CourseFlix's premium catalog. A subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch it online?
The course is available to watch online on CourseFlix at https://courseflix.net/course/mastering-nuxt-3. The page hosts every lesson with the integrated video player; no download is required.