Mastering Nuxt, 2025 Edition

5h 11m 27s
English
Paid

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 Mastering Nuxt, 2025 Edition

Join premium to watch
Go to premium
# Title Duration
1 001 Mastering Nuxt_ Full Stack Unleashed Intro 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

Similar courses to Mastering Nuxt, 2025 Edition

Facebook Clone with Laravel, TDD, Vue & Tailwind CSS

Facebook Clone with Laravel, TDD, Vue & Tailwind CSSudemy

Category: Vue, Laravel
Duration 9 hours 9 minutes 44 seconds
Master Laravel with GraphQL, Vue.js and Tailwind

Master Laravel with GraphQL, Vue.js and Tailwindudemy

Category: GraphQL, Vue, Laravel
Duration 17 hours 48 minutes 5 seconds
AI Chat Bot with Vue.js and GPT-4

AI Chat Bot with Vue.js and GPT-4vueschool.io

Category: ChatGPT, Vue
Duration 1 hour 46 minutes 30 seconds
The Imposter's Frontend Accelerator

The Imposter's Frontend Acceleratorbigmachine.io

Category: Vue, Nuxt
Duration 15 hours 48 minutes 54 seconds
Vue 3 and Nuxt.js: Different Ways of Creating Vue Apps

Vue 3 and Nuxt.js: Different Ways of Creating Vue Appsudemy

Category: Vue, Nuxt
Duration 4 hours 59 minutes 48 seconds
Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)

Complete Vue Developer 2023: Zero to Mastery (Pinia, Vitest)zerotomastery.io

Category: Vue
Duration 27 hours 56 minutes 34 seconds