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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 112 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

Watch Online Mastering Nuxt, 2025 Edition

0:00
/
#1: 001 Mastering Nuxt_ Full Stack Unleashed Intro

All Course Lessons (112)

#Lesson TitleDurationAccess
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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

The Ultimate Guide to Vue Performance

The Ultimate Guide to Vue Performance

Sources: vueschool.io
In today's world, the performance of web applications is of paramount importance. In this course, you will learn how to maintain the speed of your Vue...
2 hours 31 minutes 10 seconds
The complete guide to Mastering Pinia (Complete)

The complete guide to Mastering Pinia (Complete)

Sources: vueschool.io, Eduardo San Martin Morote
Create reliable Vue.js applications that scale. Supported and quality codebases often depend on decisions made at the early stages.
10 hours 18 minutes 32 seconds