Mastering Nuxt 3
An Introduction to Mastering Nuxt 3
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
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-off 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:
