VOOZH about

URL: https://masteringnuxt.com/

⇱ Mastering Nuxt | The official courses for learning Nuxt


👁 Image
👁 Image
👁 Image
👁 Image

Get 35% OFF the Complete Course -24 HOURS ONLY

Mastering Nuxt Fullstack Unleashed

2025 Edition - COURSE COMPLETE

The latest official hands-on course for Nuxt, covering the newest techniques and technologies to take you from zero to production - featuring Nuxt 4 and an AI-powered project.
All 100+ lessons now available!

Powered by 👁 Image
in collaboration with 👁 Image

Nuxt is trusted by the best front-end teams

An Introduction to Mastering Nuxt Full Stack Unleashed

The team behind Nuxt 4 and the Mastering Nuxt Full Stack Unleashed - 2025 Edition 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, BitterBrains and Mastering Nuxt. Discover the epic path that has lead the launch of the course.

👁 Image

Build Better, Faster, and Smarter with Nuxt

Struggling with slow performance, messy code, or poor SEO? Nuxt fixes that. File-based routing and auto-imports streamline development, while SSR and hybrid rendering boost speed and SEO. Built-in data fetching keeps things efficient across server and client. Whether you're shipping dynamic apps or lightning-fast static sites, Nuxt helps you build better, faster.

This hands-on course takes you beyond the basics, teaching real-world best practices, architecture, and performance optimization. Whether you're a junior developer looking to break into full-stack development or a senior dev refining your Nuxt expertise, this course will help you ship better apps, faster.

Prior experience with Nuxt is beneficial but not required.

Who should take this course?

This course is for anyone who wants to build professional web applications with Nuxt. Whether you're new to the framework or refining your skills, you’ll learn at your own pace through hands-on projects and real-world best practices. By the end, you’ll have the confidence to build and deploy fast, production-ready Nuxt applications.

Senior Developers

Refine your Nuxt and Vue.js expertise and master full-stack development with advanced techniques. Build and deploy performant, production-ready apps with confidence.

Junior Developers

Go beyond the basics and build real-world projects with Nuxt. Learn best practices, avoid common pitfalls, and develop a portfolio-ready AI-powered chat app from start to finish.

Students

Kickstart your career with hands-on Nuxt experience. Build and deploy a modern, full-stack AI-powered app while learning key web development concepts used by top companies.

Business & Agencies

Deliver high-performance, scalable Nuxt applications faster. Learn the latest techniques for full-stack development to streamline your workflow and build better products.

👁 Image

Michael Thiessen

Mastering Nuxt Instructor

Meet your Instructor

As the co-host of the Déjà Vue podcast and creator of the course, he’s interviewed Vue and Nuxt legends like Evan You, Daniel Roe, and Sébastien Chopin. With years of teaching through courses, books, and global talks, Michael has helped thousands of developers write cleaner, more maintainable Nuxt apps. He’s made all the mistakes so you don’t have to—and now he’s here to help you build like a pro.

What you will build

Learn the best practices, common pitfalls to avoid, and tons of tips and tricks

Get to grips with building your own AI chat app, a ChatGPT clone, and then build a blazing-fast landing page to promote it.

Course outline

We cover everything you need in order to build real-world applications and performant landing pages.

Building the MVP

You'll kick things off by creating and deploying a working MVP, giving you immediate hands-on experience. This foundation sets the stage for everything you'll build throughout the course.

To start, you'll configure your app with Nuxt modules like Nuxt UI, set up must-have build processes like linting and precommit checks, and install some essential VS Code extension.

Once your environment and project is set up, you'll build a basic server route that will connect to OpenAI's API. Then, you'll use $fetch to connect to your backend API to your UI. You'll implement markdown rendering using the Nuxt MDC module, giving you clean and structured messages in your AI-powered chat app. To keep everything structured and scalable, you'll also organize conversations into projects, making it easy to manage multiple chat sessions efficiently.

👁 Image
👁 Image

Enhancing Performance & Scalability

Once the core functionality is in place, you'll focus on making your app blazing fast and highly responsive. You'll explore advanced data fetching techniques such as lazy loading, prefetching, and optimistic UI updates using the useNuxtData, useAsyncData, and useFetch composables. You'll also integrate streaming responses with Nitro, Nuxt's backend engine, so that messages appear instantly, just like in ChatGPT.

These techniques will ensure your app remains smooth and snappy, even under heavy usage. Managing state effectively is another key aspect, and you'll leverage useState to handle reactive data efficiently across your application.

As your app grows, maintaining a clean and modular structure becomes crucial, so you'll learn how to properly organize your code with Nuxt Layers, composables, and smart component architecture, so that your app stays maintainable and scalable in the long run.

Full-Stack Development

Moving beyond the frontend, you'll dive further into backend development. Initially, you'll store data using unstorage, a flexible abstraction for handling storage, before refactoring to Supabase for a full Postgres database solution.

You'll be working with Prisma, using it as your ORM to interact with your database in a type-safe and scalable way.

Backend validation is essential for security and data integrity, so you'll implement Zod to enforce strict validation rules. This transition will give you a deeper understanding of how to manage data efficiently and scale your app's backend as needed.

👁 Image
👁 Image

Authentication & Caching

Authentication is a critical aspect of any application, and you'll implement it in a way that allows flexibility, enabling the use of different providers based on your needs.

Beyond authentication, performance optimization is key, so you'll master client and server-side caching strategies to keep your app lightning-fast. Leveraging Nitro routes, you'll implement caching mechanisms that reduce server load and improve response times.

Deployment & Production Readiness

By the end of the course, you'll have a fully functional, production-ready AI-powered chat app, built using the latest features and best practices in Nuxt. More importantly, you'll walk away with real-world, hands-on experience that prepares you to build, optimize, and deploy Nuxt applications with confidence.

Whether you're working on a personal project, a startup, or a large-scale application, this course will equip you with the skills needed to take your Nuxt development to the next level.

👁 Image

What you will learn

Mastering Nuxt Full Stack Unleashed is designed to give you a deep, hands-on understanding of how to build and deploy full-stack applications with Nuxt. By the end of the course, you’ll have the skills to create a production-ready Nuxt app from scratch, integrating both frontend and backend technologies.

File-based routing

Universal and Hybrid Rendering

Architecture for Large Projects

Async and Isomorphic Data

TypeScript

Error handling

Type safe APIs

User Authentication

Postgres Database

SEO Optimization

Performance Optimization

Route and server middleware

Nuxt internals: Nitro and h3

3rd Party Modules

Composition API and Composables

Reusable Components

Nested Routes

State Management

Deploying and Hosting

Managing Static Assets

Static Site Generation (SSG)

Server Side Rendering (SSR)

Single Page App (SPA)

Learning Outcomes

Nuxt Specific Learning

Directory‑based Project Layout
  • Using layers to organize base, auth, and chat layer modules
  • Understanding app/ as the root directory for main app content
  • Placing components in components/, pages in pages/, layouts in layouts/, server routes in server/api/, etc.
File‑based Routing
  • Automatically mapping pages/*.vue files into routes
  • Demonstrating nested directories, dynamic parameters (id.vue) and nested routes
Dynamic Pages
  • Using brackets for route params (param.vue)
  • Catch‑all routes (...slug].vue)
Error Page & Handling
  • Customizing the Nuxt error page in error.vue
  • Using showError , clearError , useError to manage global error states
  • Server or route-level errors via throw createError(...)
Nuxt Config Files
  • Multiple nuxt.config.ts files in different layers, merging and extending config
  • Setting up modules (e.g. @nuxtjs/supabase , @nuxt/ui , @pinia/nuxt )
  • Placing Overriding or extending base config in components in nuxt.config using extends property
Route and Server Middleware
  • Defining route guards in /middleware/*.ts
  • Defining server middleware in /server/middleware/*.ts
  • Named vs. anonymous route middleware
  • Using navigateTo for redirection
File-based Routing
  • Automatically mapping pages/*.vue files into routes
  • Demonstrating nested directories, dynamic parameters (id.vue) and nested routes
Layouts
  • Creating custom layouts in ~/layouts/*.vue
  • Handling default vs. named layout usage

Data Fetching & State

useAsyncData & useFetch
  • Blocking vs. non-blocking fetch (lazy mode)
  • Transforming responses, picking fields, or deeply watching reactive params
  • Auto-caching & hydration from server to client
  • How to decide which data fetching method to use
  • Pre-fetching chats for instant loading
useLazyAsyncData & useLazyFetch
  • Triggering data fetch only after the page is loaded (client side)
Global State with useState
  • Creating reactive state (persisted across SSR & client)
  • Managing state effectively and co-locating business logic

Server & Backend Integration

Server Directory
  • ~/server/api/ for server route endpoints
  • Creating GET, POST, etc. endpoints with method suffix (e.g. index.get.ts, index.post.ts)
  • Param handling in file names (id.get.ts, ...slug.ts)
  • Repository pattern and services for organizing backend logic
Automatic Request Handling
  • Making $fetch calls directly to server routes in SSR
  • Transforming responses, picking fields, or deeply watching reactive params
  • Auto-caching & hydration from server to client

Rendering & Navigation

Universal Rendering
  • Understanding SSR (server side) plus hydration on the client
  • Combining client-only components using ClientOnly
Nuxt Linking & Navigation
  • NuxtLink vs. direct a for external resources
  • Programmatic navigation using navigateTo, replace, redirectCode
  • Prefetching route data & components (prefetchComponents, preloadRouteComponents)

Meta & Head Management

useHead & useSeoMeta
  • Setting page title and meta tags
  • Reactive vs. non-reactive head definitions
definePageMeta
  • Embedding route config like alias, redirect, or path in a page script
  • Setting name, props, validate, middleware, layout, pageTransition, etc.

Configuration

Extending nuxt.config.ts
  • Merging multiple layers, each with its own config
  • Setting up modules: e.g. '@nuxtjs/supabase', '@pinia/nuxt', '@nuxt/ui'
  • runtimeConfig usage for secrets & environment variables (useRuntimeConfig)
Runtime Config
  • public vs. private keys
  • Overwriting via environment variables (NUXT_PUBLIC..._ / NUXT..._)

Other Nuxt Goodies

Layering & Theming
  • Overriding or extending from base layers (like layers/base, layers/auth, etc.)
  • Understanding how layering merges content from multiple sources
Error Page
  • Creating a custom ~/app/error.vue, reading the error from useError()
  • Distinguishing 404 vs. other errors
Composables Auto-Imports
  • Relying on ~/composables/ or #imports for easy usage of ref, useRoute, etc.
  • Using the ~/server/utils for server-only utilities in an auto-import manner
Nuxt Dev Tools
  • Learn to use it to simplify web development and debugging
CLI Commands
  • Understanding npx nuxi dev, nuxi build
Deployment & Prerender
  • routeRules usage to prerender certain paths

Simplified Tech Stack Overview

Some of the exciting technologies that you will be able to explore in the course.

Frontend

Nuxt 3 (Vue 3 + Composition API + TypeScript)

What It Is: A framework that makes building server-rendered or static Vue apps straightforward.Why It Matters (Marketing): Students can produce fast, SEO-friendly sites with modern Vue features (Composition API) and industry-standard TypeScript, making their projects stand out.Why It Matters (Technical): Offers SSR out of the box for better performance/SEO, has a clean approach to structuring pages, and provides built-in TypeScript support that catches errors early.

Vue Single File Components (SFC)

What It Is: A way to keep template, script, and styles all in one base fileWhy It Matters (Marketing): Easier for beginners to keep everything about a component together, speeding up learning and reducing confusion.Why It Matters (Technical): Encourages maintainable code and prevents style collisions (with scoped styles). Tooling also understands .vue files, for hot reloading and quick updates.

👁 14 days money back

Mastering Nuxt Full Stack Unleashed Course Packages

Essentials

$99$11010% OFF
Individuals
Teams

Instant access to the private course area

Stream or download the first 39 lessons totalling 2 hours of content

Invitation for the exclusive MasteringNuxt Discord server

Access to the source code for available lessons

Get Access

SPECIAL OFFER - 27% OFF

Complete

popular

$219$29927% OFF
Individuals
Teams

Instant access to the private course area

Stream or download initial launch chapters.

Access all 12 chapters and 95 lessons on course completion.

Invitation for the exclusive Mastering Nuxt Discord server

Access to the source code for all lessons

Certificate of completion

Get Access

Mastering Nuxt Master Classes + Vue.js Master Class

Super Bundle

$499$91746% OFF
Individuals
Teams

Invitation for the Mastering Nuxt Discord server

Certificates of completion for the Mastering Nuxt 3 & 2025 courses

Certificates of completion for the Vue.js Master Class 2024 Edition

Get Access

Mastering Nuxt Courses

Mastering
Nuxt 2

Build NuxtBnB—a production-ready Airbnb clone—while mastering Nuxt 2 best practices.


Learn file-based routing, authentication, payments, galleries, and more to create real-world, feature-rich applications.

Master Nuxt 2

Mastering
Nuxt 3

Master best practices, avoid pitfalls, and build a real-world full-stack Nuxt 3 app.


Learn file-based routing, authentication, database integration, and performance optimization to deploy production-ready projects with confidence.

Master Nuxt 3

Mastering Nuxt Full Stack Unleashed

Master Nuxt best practices by building a real-world AI-powered chat app.


Learn authentication, database integration, streaming AI responses, and performance optimization—from development to deployment with Nuxt 4.

Meet the team

👁 Image

Michael

Thiessen

Mastering Nuxt: Full Stack Unleashed Instructor
👁 Image

Alex

Kyriakidis

Co-Founder, CEO & Head of Training at Vue School
👁 Image

Daniel

Kelly

Vue.js Expert & Lead Instructor
👁 Image

Maria

Panagiotidou

Product Director
👁 Image

Mostafa

Said

Director of Education

Do you have any questions?

Do I qualify for a free copy of Mastering Nuxt Full Stack Unleashed?

If you have purchased Mastering Nuxt 3 Complete, prior to the launch of Mastering Nuxt Full Stack Unleashed, you qualify for a free copy of the course. To get your free copy, make sure you redeem your free course.

What will be the main differences between Mastering Nuxt 3 and Mastering Nuxt Full Stack Unleashed?

The main difference is that we're building an entirely new app with more advanced functionality. In Mastering Nuxt 4, you'll build an AI-powered chat app—a completely different project from the one in Nuxt 3. Also, the course is updated to incorporate the latest features available in Nuxt 3 (and soon in Nuxt 4), with a very simple upgrade process (about five minutes) when Nuxt 4 is released. While the core fundamentals of Nuxt remain the same from MN3, we're also integrating modern full-stack elements like database access and authentication, so that you will master the essential features of Nuxt 4.

Do I need to take Mastering Nuxt 3 first, or is Mastering Nuxt 4 a standalone course?

Mastering Nuxt Full Stack Unleashed is a complete rewrite of Mastering Nuxt 3 and is a standalone course. You do not need to have taken Mastering Nuxt 3 first. However, if you have already taken the previous course, you'll find Mastering Nuxt 4 to be a valuable refresher with many new topics covered.

What will the project be in this course?

You will be building an AI-powered chat app - a clone of ChatGPT but developed entirely with Nuxt. The project includes features such as streaming AI responses, dynamically generated chat names using AI, and the organization of chats into projects. Advanced data fetching techniques will also be implemented to ensure a fast, responsive user experience.

Who is the trainer?

Michael Thiessen, the creator of this course and co-host of the Déjà Vue podcast, brings a wealth of Nuxt and Vue expertise to your screen. He's interviewed leading figures in the ecosystem, including Evan You, Daniel Roe, and Alex Lichter. With a long track record of teaching through articles, books, and talks around the world, Michael has helped thousands of developers improve their Nuxt codebases - making them cleaner, more scalable, and easier to maintain. He's already made all the common mistakes so you don't have to - and now he's here to guide you in building like a seasoned pro.

What does a real-world app mean?

A "real-world app" means you're not just learning concepts in isolation - you're building something practical, complex, and actually usable. In this course, that means developing a full-stack AI-powered chat application with features you'd expect in a real product: streaming responses, project-based chat organization, dynamic routing, authentication, database integration, caching, error handling, and performance optimization. You'll deploy it, scale it, and structure it like a serious, production-grade app - exactly the kind of project that prepares you for real jobs and client work.

What is the state of the Mastering Nuxt Full Stack Unleashed course today?

The Mastering Nuxt Full Stack Unleashed - 2025 Edition is now fully complete. You can now access all 12 chapters to master Nuxt 4.

What backend technology will you be using?

The backend of the course is powered by a modern, developer-friendly stack designed for real-world applications. You'll use Nuxt's built-in server engine (Nitro) to create powerful API routes with minimal configuration. Data handling is managed first with unstorage, then refactored to use Prisma, a type-safe ORM that integrates seamlessly with Supabase, which serves as your hosted Postgres database and authentication provider. You'll validate and structure server data using Zod, implement secure authentication flows with GitHub OAuth, and enforce access control with Nuxt middleware and server composables. The result is a clean, scalable backend architecture that brings full-stack power to your Nuxt apps—without needing to set up an external server framework.

How long do I get access to the course?

Buy the course once and it's yours forever! As we update the course, you'll continue to have access to the full course, including any progressive updates.

Do you support student discounts?

Yes, we do offer students discounts. We want to encourage and support the future generation of developers.Send us an email to team@masteringnuxt.com with your student id/email or any proof that you are studying and we will help you out.

Can I get a refund if I don't like it?

Absolutely! We are offering a 14 days 100% money back guarantee if you do not like what MasteringNuxt has to offer. If you aren't satisfied, please send an email to team@masteringnuxt.com.

Can I put the AI Chat App in my CV or portfolio?

Absolutely. You are more than welcome to take the source code and add it to your portfolio and in GitHub.

Will I get a certificate of completion?

Yes! We will be offering a certificate of completion once you've completed the course. We would recommend you adding this to your CV as it could help you get that dream job you've always wanted.

What is the course format?

The course consists of HD video lessons. After you purchase, you will join our training platform, and you will be able to watch all the lessons online. If you buy the Complete package, you can also download the videos for offline use to watch them on the train or on top of the mountain.

Do you provide Purchase Power Parity discount?

Yes! We believe education must be available to everyone no matter the country they live in. We take pride in offering adjusted prices to people from countries where the conversion rate to US dollars is prohibiting high or the course might be too expensive.

Course Prerequisites

The course prerequisites assume that you are somewhat familiar with web development. You should have a basic understanding of JavaScript, HTML, and CSS, and know how to use Git (including having a GitHub account). Familiarity with Nuxt is helpful but not required, as the course is designed for those who have done some web development in the past but may be new to Nuxt.

Topics Covered

This course takes you through the complete journey of building a production-ready, AI-powered Nuxt application. You'll start with essential project setup and tooling, then move into core Nuxt concepts like file-based routing, layouts, components, and universal rendering. From there, you'll integrate with OpenAI, deploy with Netlify, and explore powerful features like dynamic routes, state management, server APIs, and advanced data fetching strategies. The course also covers caching, SEO, performance optimization, and robust error handling. On the backend, you'll work with Supabase and Prisma to create a real database layer, implement full authentication with GitHub OAuth, and secure your app with middleware and composables. It's a deep dive into modern full-stack Nuxt development—hands-on, practical, and built for real-world success.

Is this course for you?

This course is for developers who want to skip the fluff and actually build. We've stripped out the filler and focused entirely on what matters—teaching you how to build fast, scalable, production-ready apps with the latest version of Nuxt. Every lesson is purposeful. If you're serious about leveling up your Nuxt skills and want to learn by building something real, this course is built for you.

What's the best way to learn State Management for Vue.js?

If you want to learn the officially recommended state management solution for Vue.js and even directly from its creator, then we suggest you sign up for Mastering Pinia. The course has been developed by Eduardo San Martin Morote, the creator of both Pinia and Vue Router. For more information, visit masteringpinia.com

How do I improve my Vue.js skills?

Vue School offers the most comprehensive video and tutorial training library. For an overview of what is available, please visit their courses page.

Will I need to pay to access the OpenAI API?

In the course, we connect our AI chat app to OpenAI's API, which will cost a few cents. However, this is optional, as we also provide a way to get mocked responses back from the server, so you can skip this entirely. This will not affect your ability to complete the course; the only difference is that your chats will be a little less interesting.

Will the Mastering Nuxt course focus on Nuxt 4, Nuxt 3, or both?

The focus is on Nuxt 4, but almost all of the skills and concepts you'll learn are backwards compatible to Nuxt 3.

Is Nuxt 4 backward-compatible with Nuxt 3, or does it introduce breaking changes?

While there are some breaking changes, the Nuxt team has made the upgrade path very simple. You can find more in the Nuxt documentation.

Should I learn Nuxt 3 first or wait for Nuxt 4?

Just start learning Nuxt! Nuxt 3 already has most of the features that will be in Nuxt 4 (you just have to opt-in). As well, the most fundamental and important parts of Nuxt will not change at all, so there's no reason to wait.

What are the main new features in Nuxt 4?

Here are some highlights:

  • A new folder structure to better separate frontend and backend code
  • Data fetching composables use shallowRef by default to improve performance
  • Fetched data will be shared across all prerendered pages
  • Many other minor DX improvements that require breaking changesRead more about the changes in this blog post.
How risky or challenging is it to upgrade a Nuxt 3 project to Nuxt 4?

The upgrade path from 3 to 4 will not be as painful as it was from 2 to 3. The Nuxt team has been working very hard to make sure of that! The upgrade process is straightforward, and there is even a whole set of CLI tools (Codemods) to automate most of this process for you.

Is the new course completely from scratch, or just an update of the original with 4's differences?

This course is completely re-done from the ground up, with a new app and newly recorded videos. You'll learn the latest features of Nuxt, and the most up-to-date best practices!