What you can expect to learn with Mastering Nuxt 3

We’ll dig into how Nuxt works, so you’ll leave with a true understanding of how Nuxt 3 works, and how you can apply those principles to your own projects.

Michael Thiessen
Nuxt 3

Mastering Nuxt 3 course is here!

Get notified when we release new tutorials, lessons, and other expert Nuxt content.

Click here to view the Nuxt 3 course

Once you’ve completed Mastering Nuxt 3 you’ll be able to build a production-ready Nuxt 3 app from scratch, from the backend to the frontend and everything in between.

But this course isn’t about you watching me build an app with Nuxt.

We’ll dig into how Nuxt works, so you’ll leave with a true understanding of how Nuxt 3 works, and how you can apply those principles to your own projects.

And if you’re already comfortable with Nuxt 3, you’ll come away with an even deeper understanding of how it works and how to get the most out of it.

Course Outline

We cover a lot in this course.

Frontend

We start by building our MVP as quickly as possible. You learn file-based routing, how Universal rendering works, and more, in order to build out the client-side of our app. Then we deploy the app to Netlify so it’s live for the world to see.

Now that things are working, we take some time to make sure our app is engineered well.

We learn how to architect our Nuxt app and organize our code so that it’s maintainable over the long term. There’s nothing worse than trying to work on an old codebase that’s become a tangled, messy, dumpster fire.

I won’t let that happen to you and your Nuxt apps.

We also need to make sure our apps are robust enough for the real-world, and that means adding in TypeScript and thorough error-handling. No, it’s not exciting, but making sure that your app doesn’t break down means a better UX for your customers, as well as stress-free weekends.

Backend

We’ve already learned a ton about Nuxt, but now we dig deeper into how Nuxt works. Here we take a look at what powers the magic behind Nuxt — the Nitro server.

Next up is adding authentication. We need to be able to restrict access to our course, and we can do that using Supabase and Nuxt middleware.

Time for the APIs.

We use Prisma in combination with a Postgres database from Supabase so we can have type-safe access to our data. Then we build out an API that let’s us grab all of our course data from the database.

And now that we have a database set up, we can start to track our student’s progress through the course. Now we can see where there are issues and how we can make our course even better.

Landing Page

Finally, we need a way to sell the course!

We build a blazing fast landing page, using many of the tricks that Nuxt has in order to squeeze as much performance out as we can. We’ll see how to use Hybrid rendering, lazy loading, and proper asset management in order to keep things speedy.

Of course, we’ll also optimize the page for SEO so we get tons of traffic to our landing page.

Course Prerequisites

This is what you need to get the most out of Mastering Nuxt 3:

  • Comfortable with Vue — You don’t need to be an expert, but you should be familiar with Vue and Javascript.
  • Knowledge of Nuxt is not needed — If you know nothing about Nuxt or Nuxt 3, that’s totally fine! You’ll learn what you need to know as we progress through the course.
  • No TypeScript needed — We’ve tried to strike a balance between showing you what TypeScript with Nuxt 3 is capable of, while keeping it approachable for those of you who have never used TypeScript.

Topics Covered

Here’s a more detailed list of the things you can expect to learn from Mastering Nuxt 3.

  • Architecture for large projects
    • Keeping it maintainable over time
    • Composition API and Composables
    • Reusable Components
    • State Management and Pinia
  • Fast
    • SEO Optimization
    • Performance Optimization
    • Managing Static Assets
  • Advanced topics
    • Route middleware and server middleware
    • Nuxt internals: Nitro and h3
    • Using modules and 3rd party libraries
  • Render modes
    • Universal rendering
    • Hybrid rendering
    • Static Site Generation
    • Server Side Rendering
    • Single Page Apps
  • Nuxt fundamentals
    • Pages
    • Layouts
    • Components
    • Composables
  • TypeScript
    • Integration with Nuxt 3
    • Building type-safe APIs
    • Type safe database access with Prisma, Supabase, and Postgres
  • Other topics covered
    • File-based routing and nested routes
    • Async and isomorphic data fetching
    • Error handling — client-side and server-side
    • User authentication and permissions with Supabase
    • Deploying and hosting with Netlify
    • Using nuxi

Is this course for you?

We’ve worked hard to make sure this course has no fluff, and is 100% focused on teaching you how to build production-ready Nuxt 3 applications.

There’s a lot of less important stuff that we cut out. But your time is valuable, and you want to learn how to get everything you can out of Nuxt 3.

If you’re developing apps with Nuxt 3 or are planning on it, this is the course you need.

If you haven’t already, make sure you sign-up for the Mastering Nuxt 3 launch, so you can qualify for the huge Early Bird launch discount which will only be available for 24 hours from when the course is release on 25 October 2022.

Michael Thiessen
Michael is a passionate full time Vue.js and Nuxt.js educator. His weekly newsletter is sent to over 11,000 Vue developers, and he has written over a hundred articles for his blog and VueSchool.

Follow MasteringNuxt on