You probably know a few features that Nuxt 3 has.

But it has so many that you’ve probably missed a bunch.

Here are 12 incredible features of Nuxt 3:

1. Convention over configuration
2. Speed
3. Link pre-fetching
4. Universal rendering
5. Hybrid rendering
6. Vite
7. First class TypeScript
8. Full static
9. File-based routing
10. Auto-imports
11. Simple and powerful modules
12. Insight-packed official course

Let’s look at them more closely.

1. Convention over configuration

Making lots of decisions about how to configure your app is exhausting.

It’s hard to know what the best practices are, and you’d rather be shipping new features instead of researching.

So instead, all Nuxt apps have the same basic architecture and work in the same way.

This also means that it’s easier for devs to get onboarded quickly, and it’s easier for people like me to teach!

Many of Nuxt’s best features are based on convention, as we’ll see.

2. Speed

Nuxt is extremely fast.

And not just runtime performance in production (although that’s very fast as well).

Because Nuxt 3 does so much for you, developing any app with it takes less time than with just Vue.

This is partly because Nuxt 3 relies so heavily on convention, and partly because of all the magic that comes with Nuxt.

3. Link pre-fetching

When you click on a link the next page loads instantly.

This is because Nuxt 3 intelligently pre-fetches links that are scrolled in to the viewport.

Nuxt is already fast, but with pre-fetching, your users will wait around even less. Your entire web app becomes a lot snappier.

Learn more about NuxtLink in the official docs.

4. Universal rendering

SPA vs SSR has been on ongoing debate in web development for years.

But with Nuxt 3 you can have the benefits of both.

Nuxt uses server side rendering on the initial page load so it’s blazing fast.

Then it quietly loads the client-side app so further interactions are near-instantaneous.

Here’s a deeper explanation on how Universal Rendering works, taken from the Mastering Nuxt 3 course: https://twitter.com/MichaelThiessen/status/1584539381049790470?s=20&t=0nuM0pvpRMP5ebyufKqrbg

5. Hybrid rendering

Universal Rendering is absolutely fantastic, but sometimes you want more fine-grained control over rendering.

With hybrid rendering you can specify exactly how each route is rendered.

You can choose between:

• Static
• SSG
• SPA
• Universal

The docs have more info on Hybrid rendering: https://v3.nuxtjs.org/guide/concepts/rendering#hybrid-rendering

6. Vite

We all know how incredibly fast and configurable Vite is — even holding up when compared to the latest tech like Turbo Pack.

Nuxt 3 uses Vite by default, so we get all of those benefits for free.

This also makes it more straightforward to start writing unit tests in Vitest, and take advantage of all the other incredible work the Vite team has been putting in.

Of course, you can configure your app to use Webpack if you need it.

Switching bundlers — even upgrading major versions — can be a huge amount of work on a large production app. But you don’t have to worry about Nuxt 3 supporting your needs. You can start with Webpack and swap it out for Vite in the future, or just stick with Wepback if that’s your jam.

7. First-class TypeScript support

Nuxt 3 comes with full, first-class support for TypeScript.

I know that not everyone loves TS, but for those of you who do, this is a really big deal.

If you don’t love TS, it’s entirely opt-in. You don’t have to use it, and you can turn it on file by file just be changing the extension from .js to .ts, or setting lang="ts" in your Vue components.

No extra configuration needed!

You get typed API routes for free, because Nuxt 3 generates the types for you. As you write your server routes, Nuxt’s build tool is generating those types. Then, if you fetch from those routes in the client portion of your app, those types are injected.

You’re able to get type-safe code across the network boundary. Client-side or server-side, it doesn’t matter!

Your backend and frontend communication is always type safe.

The Nuxt 3 core is also fully typed — it is written from the ground up using TypeScript. This means that all built-in components, composables, utility methods, hooks, configuration, and everything else is all fully-typed.

8. Full static mode

Need a fully static JAMstack site?

Nuxt 3 has you covered.

You can build a fully static site with no JS by switching to full static mode. Run nuxi generate and it will generate all the HTML files for your site.

Learn more here: https://v3.nuxtjs.org/getting-started/deployment/#crawl-based-pre-rendering

9. File-based routing

Manually defining routes is a thing of the past.

With Nuxt 3 we just create files and folders and…

…Nuxt 3 does the rest!

It automatically generates our routes based on the file structure, which is much easier to understand at a glance. Dynamic and optional route segments are also really easy to include, just by using some square brackets in your filename.

10. Auto-imports

Why clutter up your beautiful code with unnecessary boilerplate?

Most things in Nuxt can be auto-imported.

Use a component in your template, and Nuxt injects the import code at build time. Use a composable, and it also is injected. Many modules, like VueUse, also support auto-imports with no extra configuration.

This is such a time-saver, and makes your code much more readable.

11. Simple but powerful module system

Extending Nuxt 3 couldn’t be easier.

(But I’m sure the Nuxt team will prove me wrong)

Hooks and config for almost everything are exposed, and the module builder gives you great tooling to build exceptional modules.

https://v3.nuxtjs.org/guide/going-further/modules/

12. Learning resources

Nuxt 3 has an official course that’s packed with insight and knowledge — Mastering Nuxt 3.

It’s a partnership between Vue School, Nuxt Labs, and myself.

There’s no need to worry if you’ll be able to learn Nuxt 3 and get the most out of it. The docs are incredible, and this course will take your learning and understanding even deeper.

Conclusion

Nuxt 3 comes with so many awesome features, it’s hard to wrap your head around them all.

I’ve shared just 12 of my favourites, but there are many more.

Here they are again:

1. Convention over configuration
2. Speed
3. Link pre-fetching
4. Universal rendering
5. Hybrid rendering
6. Vite
7. First class TypeScript
8. Full static
9. File-based routing
10. Auto-imports
11. Simple and powerful modules
12. Insight-packed official course