Mastering Nuxt, 2025 Edition
7h 36m 9s
English
Paid
Course description
Mastering Nuxt: Full Stack Unleashed - 2025 Edition is not just a course, but an extensive step-by-step guide to modern Nuxt, created with the participation of the teams from NuxtLabs, BitterBrains, and Mastering Nuxt.
Read more about the course
Build Better, Faster, and Smarter - with Nuxt
Slow applications, tangled code, and weak SEO optimization? Nuxt solves all these problems. Automatic routing, SSR, flexible rendering, built-in features for data handling, and high performance make Nuxt the perfect tool for both dynamic and static websites.
This course is not limited to basics — you will learn best practices, architecture, performance optimization, and approaches applied in real projects.
Who is this course for?
- Junior Developers - you will quickly upgrade from a basic level to confidently working with full-stack applications.
- Senior Developers - deepen your knowledge of Nuxt and Vue, and learn new approaches to architecture and server-side work.
- Students - gain practical experience in developing a full AI application to enhance your portfolio.
- Agencies and Companies - speed up development, reduce product rollout time, and ensure high performance.
What you will create
You will build a full-fledged AI-powered chat application - an analogue to ChatGPT, and then create a fast promo landing page.
The course begins with an MVP - you will dive into practice right away, instead of theory.
You will use Nuxt UI, configure the environment, connect to OpenAI API, use $fetch, useNuxtData, useAsyncData, Nuxt MDC for rendering messages, and organize everything by projects.
Optimization and Scalability
You will learn:
- lazy loading and prefetch,
- data streaming with Nitro,
- proper organization of components and architecture with Nuxt Layers,
- effective state management via useState.
Full-Stack Development
- First - a simple storage with unstorage, then transitioning to Supabase + Postgres.
- Working with Prisma for type-safe interaction with the database.
- Data validation with Zod.
- Authentication integration with provider support.
- Caching on the client and server, including Nitro Routes.
Production Readiness
By the end of the course, you will have:
- A full-fledged AI application ready for production.
- A deep understanding of both frontend and backend development with Nuxt.
- The ability to scale projects, optimize them, and deploy securely.
You will study:
- File-based routing
- SSR, SSG, and hybrid rendering
- Architecture of large projects
- Asynchronous data handling
- TypeScript and type-safety
- User authentication
- Working with Postgres via Prisma
- Component-based approach and Composables
- SEO and performance
- Deployment and hosting
- Internals of Nuxt (Nitro, h3)
- Middleware and routing
- Working with Nuxt modules
- State management
- SPA/SSR/SSG strategies
Watch Online
0:00
/ #1: 001 Mastering Nuxt_ Full Stack Unleashed Intro
All Course Lessons (112)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | 001 Mastering Nuxt_ Full Stack Unleashed Intro Demo | 00:56 | |
| 2 | 002 How the Mastering Nuxt course works | 02:38 | |
| 3 | 003 Debugging and Troubleshooting Tips | 03:51 | |
| 4 | 004 Chapter 1 Introduction | 00:46 | |
| 5 | 005 Faster package management with pnpm | 02:06 | |
| 6 | 006 Create a Nuxt 4 Project | 04:44 | |
| 7 | 007 Create a GitHub Project | 02:16 | |
| 8 | 008 Keep your Node version consistent with NVM | 05:17 | |
| 9 | 009 Setup the Ideal Nuxt Development Experience with VS Code Extensions | 04:10 | |
| 10 | 010 Quickly build beautiful UIs with Nuxt UI | 03:17 | |
| 11 | 011 Enforce consistent code style with ESLint | 05:34 | |
| 12 | 012 Run linting automatically with Husky | 01:57 | |
| 13 | 013 Chapter 1 Summary | 00:25 | |
| 14 | 014 Chapter 2 Introduction | 01:08 | |
| 15 | 015 Catch Up on the Project Setup (Chapter 1) | 01:55 | |
| 16 | 016 App.vue, the most important component in your Nuxt app | 02:22 | |
| 17 | 017 Create pages with file-based routing and the NuxtPage Component | 05:01 | |
| 18 | 018 Reuse UI with Layouts and the NuxtLayout Component | 05:28 | |
| 19 | 019 Use Composables to Organize Logic | 08:09 | |
| 20 | 020 Use Components to Organize UI | 10:35 | |
| 21 | 021 Add a Button to Scroll to the Bottom of the Chat | 04:05 | |
| 22 | 022 How to Decide Between Pages, Layouts, and Components | 05:30 | |
| 23 | 023 Reactively Update the Head Tag with useHead | 03:15 | |
| 24 | 024 Create a Basic API with Server Routes | 05:38 | |
| 25 | 025 Fetch Data From Your API with $fetch | 03:08 | |
| 26 | 026 What is Universal Rendering in Nuxt_ | 05:04 | |
| 27 | 027 Chapter 2 Summary | 00:26 | |
| 28 | 028 Chapter 3 Introduction | 00:32 | |
| 29 | 029 Configure Secure and Clear Runtime Settings in Nuxt | 03:47 | |
| 30 | 030 Configure Your Nuxt App with app.config for Reactive Settings | 02:21 | |
| 31 | 031 When to Use Which Config_ Runtime vs. App Config | 03:55 | |
| 32 | 032 Create an OpenAI Account | 03:26 | |
| 33 | 033 Run Large Language Models Locally with OLLAMA | 03:12 | |
| 34 | 034 Integrate AI-Generated Responses Using OpenAI and Ollama | 07:45 | |
| 35 | 035 Implement a Typing Indicator for Feedback | 02:35 | |
| 36 | 036 Use Nuxt DevTools for Application Debugging and Insight | 04:29 | |
| 37 | 037 Markdown Rendering with Nuxt MDC and Shiki Syntax Highlighting | 03:29 | |
| 38 | 038 Deploy Your Nuxt App to Netlify for Global Access | 04:54 | |
| 39 | 039 Chapter 3 Summary | 00:31 | |
| 40 | 040 Chapter 4 Introduction | 01:02 | |
| 41 | 041 Build Dynamic Routes and the App Header | 04:20 | |
| 42 | 042 Manage Global State with useState | 10:07 | |
| 43 | 043 Manage Nested Data with Normalized State | 06:36 | |
| 44 | 044 Add Programmatic Navigation with navigateTo | 05:30 | |
| 45 | 045 Client-Side Navigation with NuxtLink | 05:26 | |
| 46 | 046 Sidebar Navigation with Nuxt UI Components | 04:20 | |
| 47 | 047 Share and Reuse Utility Functions with Nuxt's utils Directory | 07:39 | |
| 48 | 048 Implement Nested Routes in Nuxt for Organized and Dynamic Applications | 07:18 | |
| 49 | 049 Organize UI with Dynamic Navigation Menus in Nux | 06:27 | |
| 50 | 050 Customize Themes in Nuxt UI with Tailwind CSS | 03:47 | |
| 51 | 051 Organize and Share Code with Nuxt Layers | 09:32 | |
| 52 | 052 Chapter 4 Summary | 00:58 | |
| 53 | 053 Chapter 5 Introduction | 01:08 | |
| 54 | 054 Share Code Between Frontend and Backend Using Nuxt's Shared Directory | 03:56 | |
| 55 | 055 Implement the Repository Pattern to Decouple Data Operations in Nuxt | 04:22 | |
| 56 | 056. Refactor and Optimize Nuxt Project Configuration | 02:09 | |
| 57 | 057. Organize Server Routes by HTTP Method in Nuxt | 03:20 | |
| 58 | 058. Dynamic Server Routes in Nuxt for AI Chat Messages | 03:22 | |
| 59 | 059. Send Data to Server Routes | 04:27 | |
| 60 | 060. Add AI-Generated Chat Titles to Your Application | 04:24 | |
| 61 | 061. Add in the rest of the endpoints | 01:50 | |
| 62 | 062. Chapter 5 Summary | 00:40 | |
| 63 | 063. Chapter 6 Introduction | 01:22 | |
| 64 | 064. Upgrade to Nuxt 3.17 for Improved Data Fetching | 00:53 | |
| 65 | 065. Avoid Extra Client-Side Requests with useAsyncData | 06:23 | |
| 66 | 066. Optimize Data Fetching with useAsyncData | 04:02 | |
| 67 | 067. Simplify Data Fetching with Nuxt's useFetch Composable | 01:21 | |
| 68 | 068. Manage Data Reactively with useState and useFetch in Nuxt | 01:15 | |
| 69 | 069. When to use fetch, useFetch, and useAsyncData | 04:45 | |
| 70 | 070. Add AI-Generated Chat Titles with a Typewriter Animation | 04:10 | |
| 71 | 071. Complete the Data Fetching for your Nuxt Chat App | 03:46 | |
| 72 | 072. Chapter 6 Summary | 00:51 | |
| 73 | 073. Mastering Nuxt - Catch up | 05:24 | |
| 74 | 074. Mastering Nuxt - Chapter 7 Introduction | 00:53 | |
| 75 | 075. Mastering Nuxt - Configure Persistent Storage in Nuxt with Unstorage | 08:50 | |
| 76 | 076. Mastering Nuxt - Implement Server Middleware for Global Request Handling | 03:01 | |
| 77 | 077. Mastering Nuxt - Optimize API Performance with Cached Event Handlers in Nuxt | 06:09 | |
| 78 | 078. Mastering Nuxt - Validate Runtime Data in Nuxt with Zod | 08:13 | |
| 79 | 079. Mastering Nuxt - Explore Nitro and H3 in Nuxt's Backend Architecture | 06:03 | |
| 80 | 080. Mastering Nuxt - Chapter 7 Summary | 00:49 | |
| 81 | 081. Chapter 8 Introduction | 00:49 | |
| 82 | 082. Stream AI Responses to the UI | 06:48 | |
| 83 | 083. Create Instant UI with Optimistic Updates | 07:20 | |
| 84 | 084. Pre-fetching Chats with Nuxt's callOnce Utility | 08:21 | |
| 85 | 085. Chapter 8 Summary | 00:42 | |
| 86 | 086. Chapter 9 Introduction | 00:44 | |
| 87 | 087. Optimize Performance by Lazy Loading Components in Nuxt | 07:53 | |
| 88 | 088. Transform and Optimize Images with Nuxt Image | 07:03 | |
| 89 | 089. Explore Nuxt's Rendering Modes for Optimal Performance | 09:20 | |
| 90 | 090. Configure Rendering Modes with Nuxt Route Rules | 04:24 | |
| 91 | 091. Chapter 9 Summary | 00:46 | |
| 92 | 092. Chapter 10 Introduction | 00:33 | |
| 93 | 093. Implement Error Handling in Nuxt with the createError Utility | 03:44 | |
| 94 | 094. Customize Error Pages in Nuxt Applications | 05:31 | |
| 95 | 095. Isolate Client-Side Errors with NuxtErrorBoundary | 04:01 | |
| 96 | 096. Chapter 10 Summary | 00:16 | |
| 97 | 097 Chapter 11 Introduction | 00:52 | |
| 98 | 098 Set Up a Supabase Project and Connect with Prisma | 02:54 | |
| 99 | 099 Integrate Prisma Into Your App | 10:45 | |
| 100 | 100 Seed Your Database with Prisma for Development | 04:50 | |
| 101 | 101 Unify TypeScript and Database Types with Prisma | 05:16 | |
| 102 | 102 Retrieve and Manage Data Using Prisma Queries | 03:49 | |
| 103 | 103 Fix Bugs and Finish Supabase and Prisma Integration | 03:39 | |
| 104 | 104 Chapter 11 Summary | 00:35 | |
| 105 | 105 Chapter 12 Introduction | 01:04 | |
| 106 | 106 Integrate GitHub OAuth Authentication in Nuxt | 09:49 | |
| 107 | 107 Add User Authentication with NuxtAuthUtils | 09:17 | |
| 108 | 108 Link the Github User to Your Own Internal User | 04:06 | |
| 109 | 109 Secure Server Endpoints with Server Composables | 09:21 | |
| 110 | 110 Secure Client-Side Routes with Route Middleware | 04:39 | |
| 111 | 111 Seed User-Specific Data with Prisma | 04:38 | |
| 112 | 112 Chapter 12 Summary | 00:53 |
Unlock unlimited learning
Get instant access to all 111 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscription
Want to join the conversation?
Sign in to comment