One of my favorite ways to learn is by reading tutorials and other articles.

So, I’ve compiled this list of 24 articles that I’ve written on Nuxt 3.

These articles cover a whole range of topics, including:

• Quick tips and tricks that you can use immediately
• An entire series on using auth with Nuxt
• Understanding how OAuth and Universal Rendering work
• Building your own caching composable

So, take a look — there might be a few articles in here that are exactly what you need.

1. The 12 Best Features in Nuxt 3

This is a high-level overview of 12 of the most crucial features in Nuxt 3.

I explain why each is important, and how Nuxt 3 works hard to make your dev experience as effortless as possible.

Read it here: The 12 Best Features in Nuxt 3

2. Client-Side Error Handling in Nuxt 3

It may not be as fun as shipping the next feature, but making sure our apps are rock-solid and can recover from errors is crucial.

Without good error-handling, our UX suffers and our applications can be hard to use.

In this article, I explore handling client-side errors using the NuxtErrorBoundary component.

Read it here: Client-Side Error Handling in Nuxt 3

3. Explaining Nested Routes

Routing is one of the foundational parts of any web app, whether you're using Nuxt 3 or just using Vue Router directly.

In most apps you'll also need to create nested routes (or child routes) — but they can be hard to wrap your head around.

In this article, I take a unique angle in explaining how they work.

Read it here: Explaining Nested Routes

4. My Favourite Nuxt 3 Features

In this article, I explore several features of Nuxt 3 that I think are the most interesting.

This will give you a good overview of why Nuxt 3 is so great to work with.

Read it here: My Favourite Nuxt 3 Features

5. Nuxt 3: Pages vs. Layouts vs. Components

Nuxt 3 comes with 3 different ways to organize your components: pages, layouts, and components.

It can be difficult to know which to use when, so I wrote this article to help explain the differences.

Read it here: Nuxt 3: Pages vs. Layouts vs. Components

6. Server Routes in Nuxt 3

Server routes are a powerful feature of Nuxt 3 that allow you to create custom endpoints for your app.

In this article, I look at the different types of server routes and how to use them.

Read it here: Server Routes in Nuxt 3

7. Using OAuth in Nuxt 3

OAuth is tricky to understand, so I wanted to write something to help explain how it works.

Luckily, we can use auth without knowing OAuth, but it's still good to understand how it works.

This one is based on the Mastering Nuxt 3 course I created with Vue School.

Read it here: Using OAuth in Nuxt 3

8. Writing a Cache Composable in Nuxt 3

In this article, I explore how to write a composable in Nuxt that can be used to cache data when using fetch.

It's a fun one! We dig into TypeScript, composition API, and Nuxt 3's useFetch composable.

Read it here: Writing a Cache Composable in Nuxt 3

9. Auth in Nuxt 3: Setting Up Supabase Auth with Nuxt 3 (1 of 4)

Authentication can be tricky to implement, but it lets us do so much in our apps.

In this first article of this series, we’ll go over how to set up and configure Supabase in our Nuxt project.

Here are the main steps we’ll cover in this article:

• Create the Supabase project
• Set up the Github OAuth app
• Install the Nuxt 3 Supabase module
• Adding in our environment variables

Read it here: Auth in Nuxt 3: Setting Up Supabase Auth with Nuxt 3 (1 of 4)

10. Auth in Nuxt 3: Logging in and Logging Out (2 of 4)

The first step in implementing auth in our Nuxt 3 app is to log our users in — and then log them out.

In this second article of this series, we'll cover logging in and out using Github as the OAuth provider.

Here is what we’ll cover in this article:

• Authentication vs. Authorization
• Using Github for Authorization
• Logging in
• Logging out
• Displaying User Info

Read it here: Auth in Nuxt 3: Logging in and Logging Out (2 of 4)

11. Auth in Nuxt 3: Protecting Routes in Nuxt 3 with Supabase (3 of 4)

The whole point of adding auth to our Nuxt 3 app is to restrict access to certain parts of our application.

That’s where route middleware comes in, which we’ll be using to block users who aren’t logged in.

In this third article of this series, we'll go over how to protect your routes using route middleware.

Read it here: Auth in Nuxt 3: Protecting Routes in Nuxt 3 with Supabase (3 of 4)

12. Auth in Nuxt 3: Protecting Server Routes in Nuxt 3 with Supabase (4 of 4)

It’s not great to leave our API endpoints unprotected, even if all of our routes are secure.

Thankfully, protecting our server routes doesn’t require a lot of code from us.

In this fourth article of the series, we'll go over how to protect your backend server routes using auth.

Read it here: Auth in Nuxt 3: Protecting Server Routes in Nuxt 3 with Supabase (4 of 4)

13. Better Navigation with NuxtLink

The NuxtLink component may seem simple at first glance, but there’s a lot going on beneath the surface.

It’s one of the easiest Nuxt 3 components to use while giving our apps a big performance boost.

In this article, we see some things about NuxtLink that you may not have known.

Read it here: Better Navigation with NuxtLink

14. Handling Assets in Nuxt 3

Nuxt 3 gives us two great options for managing all of our assets in our web app.

But what’s the difference, and how do you know which to use?

In this article, I’ll share some simple questions you can ask yourself to figure out where to put your assets, as well as the differences between the two strategies.

Read it here: Handling Assets in Nuxt 3

15. Configuration in Nuxt 3: runtimeConfig vs. appConfig

Nuxt 3 provides powerful configuration options, allowing you to adapt your application to different use cases.

The two key parts of Nuxt 3's configuration system are runtimeConfig and appConfig.

This article will explain the purpose and differences between these two options and show you how to use them.

Read it here: Configuration in Nuxt 3: runtimeConfig vs. appConfig

16. Data Fetching Basics in Nuxt 3

Nuxt offers a set of powerful built-in tools for handling data fetching.

It provides composable functions that make it easy to fetch data and automatically handle server-side rendering, client-side hydration, and error handling. This enables you to write clean and efficient code, ensuring an optimal user experience.

In this article, we’ll examine the different methods Nuxt gives us for data fetching.

Read it here: Data Fetching Basics in Nuxt 3

17. Compressing Images with Vite and VSharp

Images are one of the biggest causes of slow webpages.

We have a bunch of strategies for dealing with this, but the most basic one is to make sure each and every image in your app is compressed as much as possible.

Fortunately for us, setting up Nuxt to automatically compress our images only takes a few minutes.

Read it here: Compressing Images with Vite and VSharp

18. What is Universal Rendering in Nuxt 3?

Modern web development has brought forth two main types of applications: Single Page Apps (SPA) and Server Side Rendered apps (SSR).

While each has its advantages, Nuxt offers a unique approach that combines the benefits of both types.

This article delves deeper into the workings of SPAs, SSRs, and the innovative Universal Rendering of Nuxt.

Read it here: What is Universal Rendering in Nuxt 3?

19. 24 Time-Saving Tips for Nuxt 3

We know that Nuxt is a fantastic tool.

But it has so many amazing features that it’s hard to keep track of them all.

That’s why I’ve compiled this giant list of 24 Nuxt tips for you — use them to save time and write better Nuxt apps.

We cover a lot of topics here, including:

• When to use /assets vs. /public directory
• Using runtimeConfig vs. app.config
• Understanding how Universal rendering works (and how it’s different from SPA and SSR)
• A utility to make your own NuxtLink components that no one is talking about
• Adding a basic cache to your data fetching — since Nuxt doesn’t do this by default

Of course, there is so much more!

Read it here: 24 Time-Saving Tips for Nuxt 3

20. Prisma with Nuxt 3: Setting up Prisma with Supabase (1 of 5)

Trying to manage database schemas alongside your Nuxt app types can be a challenge.

But with Prisma, most of these problems go away.

It handles all of the boilerplate and coordination, so you just write one single schema that’s used in your database and in your TypeScript app.

This is the first article in a series dedicated to showing you how to use Prisma in your Nuxt 3 app.

Read it here: Prisma with Nuxt 3: Setting up Prisma with Supabase (1 of 5)

21. Prisma with Nuxt 3: Creating the Prisma Schema (2 of 5)

Trying to manage database schemas alongside your Nuxt app types can be a challenge.

But with Prisma, most of these problems go away.

It handles all of the boilerplate and coordination, so you just write one single schema that’s used in your database and in your TypeScript app.

In this article, I show you how to create your Prisma schema.

Read it here: Prisma with Nuxt 3: Creating the Prisma Schema (2 of 5)

22. Prisma with Nuxt 3: Seeding the Database with Dummy Data (3 of 5)

A database is useless without any data.

But with Prisma, adding in seed data (or “dummy” data) is extremely easy.

In this article we’ll cover:

• How to generate our Prisma client
• How to update our Supabase database with migrations
• How to add in dummy data

Read it here: Prisma with Nuxt 3: Seeding the Database with Dummy Data (3 of 5)

23. Prisma with Nuxt 3: Getting Data with Prisma (4 of 5)

We’ve got our database filled with data — now we need to fetch that data.

Prisma gives us a ton of flexibility and power in how we do that.

We can easily make complex queries, all while keeping everything typesafe — you just have to know a couple of tricks to get it to work correctly.

In this fourth article in the series, I'll show you how to get data from your database using Prisma.

Read it here: Prisma with Nuxt 3: Getting Data with Prisma (4 of 5)

24. Prisma with Nuxt 3: Modifying Data with Prisma (5 of 5)

So far in this series, we’ve covered a lot on how to use Prisma in our Nuxt 3 apps.

But we’ve left out a major piece — actually being able to modify the data in the database.

A pretty crucial part of the puzzle I think!

In this article, I'll show you how to modify data in your database using Prisma.

Read it here: Prisma with Nuxt 3: Modifying Data with Prisma (5 of 5)