10 of the Best Nuxt 3 Tutorials
10-of-the-best-nuxt3-tutorials
Nuxt 3 has a ton of really amazing features that make it a spectacular framework.
But all those features means it can be hard to learn, and hard to even know where to start.
That’s why I’ve compiled ten of the best Nuxt 3 tutorials, to help you get started — or continue along — your Nuxt journey.
The last one is by far the most comprehensive, but the others are also incredibly helpful.
1. Building Composable Commerce Crash Course (Series)
In this series, Jakub Andrzejewski shows you how to build your own e-commerce store using Nuxt 3, Shopify, Apollo, and Storyblok. A lot of great tech all together!
It’s done in 3 parts:
- First, building the app using Nuxt 3
- Second, interacting with Shopify’s GraphQL API to fetch data and create checkouts.
- Lastly, you connect everything to Storyblok so you can create and update dynamic content
It even comes with the full source, so you can browse the completed project at any point if you get lost.
You can read it here: Building Composable Commerce Crash Course
2. From Zero to Blog
Blogging is a great way to learn and give back your knowledge. It’s also just fun (or maybe that’s just me?)
In this article, Gonzalo Hirsch leads you through how to use Nuxt 3 and the Nuxt Content module to make your own blog. You’ll use TailwindCSS to style everything and make it look pretty, and dig into ways you can customize Nuxt Content and use queryContent for more control.
You can check this one out here: From zero to blog: Building with Nuxt 3
3. Comprehensive Guide to Data Fetching
This one doesn’t show you how to build something specific, but it does go through and demystifies all the different ways you can fetch data in a Nuxt app (there are a lot).
It goes into how to use ofetch, the library underlying all the data fetching in Nuxt. It also includes all the details on useFetch and useAsyncData, including how they’re different and when to use which.
It’s a really important article to read, so don’t skip this one: A Comprehensive Guide to Data Fetching in Nuxt 3
4. How to use Vuetify with Nuxt 3
Vuetify is an extremely popular component library, and this tutorial shows you exactly how to integrate it into your Nuxt app.
Along the way you also learn how to create Nuxt plugins, which come in handy in a lot of different situations.
Check out this article by Cody Bontecou: How to use Vuetify with Nuxt 3
5. Running Nuxt 3 in a Docker Container
Lots of dev workflows require running apps in Docker containers, whether it’s for dev or just for production.
Markus has written a great article on how to get your Nuxt app set up in a Docker container. It goes through how to create the Dockerfile, including multi-stage builds. He covers how to use it in both development and production environments, so your dev setup will more closely mirror your fully-deployed system.
Read it here: Running Nuxt 3 in a Docker Container
6. Dynamic Pages and Route Params in Nuxt 3
Have you ever needed to represent a set of pages without knowing what their urls are at build time? These are called dynamic pages and use route params (which are different from query params).
This tutorial does a deep dive into everything related to dynamic pages, dynamic routes, and how to use the useRoute composable to get you there. It also covers dynamic server routes so your API endpoints won’t be ignored, either.
Read it here: Dynamic Pages and Route Params in Nuxt 3
7. Writing a Cache Composable in Nuxt 3
Nuxt makes data fetching really simple with useFetch and useAsyncData — but they don’t come with caching.
That’s why we’ll be writing our own composable that adds basic caching to useFetch in this tutorial. This is actually one of my favourite tutorials I’ve written.
Along the way we’ll learn about:
- Working with session storage
useFetch- Creating reusable code with TypeScript generics
Learn to build your own composable here: Writing a Cache Composable in Nuxt 3
8. Auth in Nuxt 3 (Series)
In this series, we’ll be covering how to use Supabase with Nuxt 3 to add auth to our apps.
It’s a comprehensive series that covers a whole lot:
- Using Github to authenticate and log in and out
- Protecting routes in your frontend
- Protecting server routes — your API
At the end of the series you’ll be able to add auth to any Nuxt app: Auth in Nuxt 3 (Series)
9. Prisma with Nuxt 3 (Series)
Prisma lets you use TypeScript with your database. It makes so many things a lot simpler, and in this series we cover exactly how to get started using it in your Nuxt app.
We cover:
- Setting up Prisma with Supabase
- Creating your Prisma schema
- Seeding the database with dummy data
- Fetching data from the database
- Modifying and updating data in your database
Start this series here: Prisma with Nuxt 3 (Series)
10. Mastering Nuxt 3
Of course, I saved the best one for last.
The most comprehensive tutorial you’ll find anywhere on learning Nuxt 3 (and the only official one as well!) is Mastering Nuxt 3.
We cover so much in this course, covering the frontend, backend, and everything in between.
Check out the course here: Mastering Nuxt 3
