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 Nuxt 3 Bootcamp The Complete Developer Guide

The Nuxt 3 Bootcamp The Complete Developer Guide

Sources: udemy
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
16 hours 52 minutes 7 seconds
100 Days Of Code: The Complete Web Development Bootcamp 2024

100 Days Of Code: The Complete Web Development Bootcamp 2024

Sources: Academind Pro
Learn web development from A to Z in 100 days (or at your own pace) - from "basic" to "advanced", it's all included!
78 hours 51 minutes 55 seconds
The Complete Guide to Django REST Framework and Vue JS

The Complete Guide to Django REST Framework and Vue JS

Sources: udemy
Hi! Welcome to The Complete Guide to Django REST Framework and Vue JS course! In this course you will learn how to create professional REST APIs with Python and Django REST Fram...
13 hours 40 minutes 40 seconds