[VIP] Mastering Nuxt: Mastering Nuxt 3 [Updated 01.2023]

The complete guide to developing and deploying fast, production-ready Nuxt apps.

An Introduction to Mastering Nuxt 3​

The team behind Nuxt 3 and the Mastering Nuxt 3 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, Vue School and Mastering Nuxt. Discover the epic path that has lead the launch of the course.

Mastering Nuxt 3 Landing Page video from Alex Kyriakidis on Vimeo.

Build awesome websites​

Learn how to build robust, modern websites with Nuxt from scratch. Or improve your website performance, code quality, while making better use of the framework.
Learn the best practises, common pitfalls to avoid, and tons of tips and tricks. Prior experience with Nuxt is beneficial but not required.
Nuxt.js is a modular framework built on top of the easiest web development framework in 2020 Vue.js. It allows developers of any kind to create elegant websites progressively. We see huge enterprise companies and governments using Nuxt to build websites quickly — very important especially during the pandemic. We also see solo devs building exceptional side projects with Nuxt.

What you will build​

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

Get to grips with building your own online course and database, and then build a blazing-fast landing page to sell your course. Explore technologies like VueUse, Nuxt, Vue.js.

Course Outline​

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

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.

We 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.

Landing Page​

Finally, we need a way to sell the product!
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.

What you will learn​

The Mastering Nuxt 3 course aims to provide you with a true understanding of how Nuxt 3 works and how you can apply those principles to your own projects. On completion of the course you’ll be able to build a production-ready Nuxt 3 app from scratch, from the backend to the front end and everything in between, including the following:

Who is this for?​

The course is for anyone that wants to learn how to build professional websites!
You just need to be interested in learning Nuxt. No matter what level you’re at you can learn at your own pace and become a master in Nuxt with this course.
Senior Developers - develop full-blown, performant Vue and Nuxt 3 applications.
Junior Developers - build your first state-of-the-art website using Nuxt 3 and the best practices. Avoid common gotchas in learning and get ahead of the herd.
Students - start learning a new skill and join the global community of Nuxt developers. You can add the Mastering Nuxt 3 project to your portfolio and GitHub.
Business & Agencies - some of the largest business and agencies use Nuxt because it makes building modern websites easy and quick. Agencies also appreciate the great performance and SEO that Nuxt comes with.