Nuxt 3 ships with a whole array of mind-blowing features.

Truly, it's an incredible tool, and we're blessed to have access to something like this.

I've been working on Mastering Nuxt 3 and thinking a lot about all these features and how they work together.

So I decided to give you a list of my favourite ones and why I think they are great. It's a challenging list to come up with, but I'm pretty happy with it.

Here are my 4 favourite features of Nuxt 3.

File-based Routing

One of the best parts of Nuxt 3 is that routing is defined through the file structure of your app.

This makes it really easy to understand at a glance and easy to find the code you're looking for.

Too often, I've been trying to fix a bug or figure out how to start working on a new feature, and it takes forever to figure out where the code for that feature lives! So I start taking random text from the UI and searching the codebase for it or looking for unique class names in the DOM, hoping that it brings me to the correct file.

I don't think I need to tell you how frustrating and difficult this process is!

But with file-based routing like this, I know exactly where the code is just by looking at the route I'm on.

The best part about this is that I don't need to do it myself. I don't need to spend time creating a routes file, matching paths to components, adding in middleware, and then updating it all the time. Nuxt takes care of this for me, so I don't have to worry about it if I don't want to.

Of course, since it's using Vue Router under the hood, I can always hook into that if I need that extra control.

Auto-imports

Everyone seems to be talking about this one, and for good reason!

It may seem like a small thing, but auto-imports make the whole developer experience so much nicer. Any components, composables, or layouts I need to use are automatically imported. So I can just use them without thinking of where they come from.

This makes my code much simpler and saves on unnecessary clutter at the top of every file.

And to be completely honest, I'm not sure there's any real downside to this. Nuxt 3 only imports the code we're actually using, so there's no performance hit. We're only shipping the code we need.

Built-in Composables

Nuxt 3 comes with several composables built into the framework itself.

These make it easy to use Nuxt-specific features and common tasks that can otherwise be a bit tedious to deal with.

Here are some composables I've been using:

• useHead to easily change things within the head tag. You can update the page title, add in script or style tags, and add in meta tags for SEO
• useRoute to quickly get context for where we are in the app. It also makes it super easy to pull out query params.
• useState for a simple way to share data across components if you don't need to use something more robust like Pinia.
• useAppConfig for deep support of a reactive config instead of passing around a global object to track it. The app config is reactive, supports HMR during development, and can be edited by Nuxt plugins.

But we're not stuck with only what ships with Nuxt 3.

Plugins to modify and extend Nuxt 3

The main reason why devs love Nuxt 3 is that it makes all of the everyday web development tasks simple and easy.

Usually, though, abstracting things in this way comes with a tradeoff — anything the framework doesn't support is made even harder to accomplish. This sucks because while 90% of things are made easier, the other 10% is made more difficult.

Fortunately for us, the team at Nuxt Labs has thought this through, so Nuxt 3 does not suffer from this problem.

Through modules and plugins, we can hook into the inner workings of Nuxt and extend the behaviour in many different ways:

• We can dynamically add custom routes using addRouteMiddleware, and completely bypass the file-based routing system if we like.
• We can hook into the build system, modifying the paths of our content during build time.
• You could even hook into the bundler progress in order to integrate it with your own logging and telemetry tools.

There's a whole list of hooks that you can use. The real question is: how are you going to use this power?

If you have already signed-up to get updates like this via email, that is great! If you haven’t (and you want to qualify for that Early Bird launch discount for the launch of the Nuxt 3 course), then sign up on the Mastering Nuxt 3 page.