After Vue 3’s stable release late last year and migration of all first-party tools and libraries, we now see more and more open-source libraries and tools moving from Vue 2 to Vue 3.

That’s why it’s just about time for the most popular Vue framework to make the jump too. Naturally, I’m talking about Nuxt.js, which will officially enter public beta in a few days from the release of this post.

So let’s talk about what you can expect from Nuxt 3, what improvements it will bring, and whether or not you should transition to it!

Nuxt 3 current status

Before we dive into the features, let’s take a quick look at the Nuxt 3 current status.

After many delays, it seems like we’ll finally get to see Nuxt 3 in all its glory on October 12, 2021. How certain is this date, considering the previous delays? Well, with an official announcement at Nuxt Nation and a dedicated landing page with a countdown - it’s undoubtedly more credible than ever.

Apart from the date, there are other details further confirming the upcoming release date. Nuxt 3 is now in private beta, with access given to the Vue core development team and close partners.

Also worth mentioning is Nuxt new branding identity and website redesign. While it’s up right now and includes Nuxt 2 documentation, it’s surely a sign of the upcoming v3. Also, the website itself is built with Docus - “Document-Driven Web Apps Platform” - which will be based on and open-sourced alongside Nuxt 3.

New features

With the Nuxt 3 release date out of the way - let’s talk about the good stuff! Of course, I mean all the new features and improvements that are coming in Nuxt 3.

Now, with a single landing page, a few discussions, and talks - there’s not much detail available on Nuxt 3. Still, we’ll try to piece together some helpful info so that you’ll have a general picture of what to expect.

General optimizations

Nuxt 3 brings many general optimizations and improvements. The result is a smaller bundle size (20% lighter core when compared to Nuxt 2) and improved performance.

Developers can expect better performance in development thanks to the new Nitro server engine with optimized cold starts and dynamic code-splitting.

On top of that, other parts of tooling have also been upgraded - there’s now Webpack 5, PostCSS 8, ESBuild, and Vite support - making both development and production builds extremely fast.

Vue 3

To no one’s surprise, Nuxt 3 will be based on Vue 3 and provide an experience tailored to the latest version of the Vue framework. This means:

• New, modular utilities for the Composition API;
• Improved routing with Vue Router 4;
• Revised data fetching and Suspense integration.

TypeScript

On top of Vue 3 migration, Nuxt 3 adopts ES Modules (ESM) and TypeScript as first-class citizens for improved development experience. This move aligns with what Vue 3 has done and where the whole Vue ecosystem is now going.

Tight TypeScript integration will provide type-checking for the whole Nuxt 3 codebase, as well as better autocompletion and error detection.

If you don’t like TypeScript, you’ll still be able to use Nuxt without any issues.

Better development experience

Beyond TypeScript, Vue 3, and performance improvements, Nuxt 3 comes with even more improvements to the development experience, which includes:

• New Nuxt CLI for easy project scaffolding and module integration;
• Nuxt Devtools for faster and more comfortable debugging right in the browser;
• Modern utility modules toolkit called Nuxt Kit;
• Auto-import for global utilities and composable functions.

Hybrid rendering

Last but not least, Nuxt 3 introduces hybrid rendering or so-called “incremental static generation”. This feature, in broad terms, will allow you to decide whether and how long you want to have your pages rendered statically or dynamically. More details on this feature will come alongside the beta release.

Nitro engine

Now, one of the headline features of Nuxt 3 is its new server engine - Nitro. This engine is what drives many performance improvements and new features of Nuxt 3.

API routes

Thanks to Nitro, you’ll now be able to create and run server API code easily, just like it’s currently possible in many other full-stack frameworks. The new server/api/ directory will be the place for your server API, while functions will find their home in server/functions/.

The new API routes, coupled with a new isomorphic fetching mechanism and improved serverless support, mark a step in the right direction.

Optimized output

Another advantage of Nitro is its highly optimized, universal output to the new .output directory. The core server bundle will now be less than 1 MB and will see a notable performance increase. For example, cold starts will be faster by 75-100 times! This will prove very beneficial for environments like Cloudflare Workers.

These improvements will be achieved by better dependency tracking using Node File Trace from Vercel (@vercel/nft). This will ensure that only the necessary dependencies are included in the final bundle.

Further bundle size reductions will be accomplished with a revised code-splitting mechanism.

Cross-platform support

With the rapid evolution of JavaScript over the last few years, multiple JS-powered platforms have emerged - and Nuxt 3 is ready for all of them.

Thanks to the previously-mentioned, improved dependency tracking and new lightweight polyfills coupled with platform auto-detection, Nuxt 3 will run seamlessly in pretty much all JS environments. This includes Node.js, Deno, Cloudflare Workers, and even browser Service Workers (though that’s experimental right now).

Nuxt Bridge

While Nuxt 3 looks like a great upgrade, there’s a big problem we haven’t discussed - compatibility. Vue 3 itself, with its breaking changes, already made many libraries and tools from Vue 2’s ecosystem “obsolete” and at a need for an upgrade. So, how hard will it be to upgrade to Nuxt 3? Thanks to Nuxt Bridge - not that hard!

Nuxt Bridge is a project meant to bring Nuxt 3 features to Nuxt 2. This is intended to make future migration smoother while also providing many Nuxt 3 improvements to Nuxt 2 users that don’t plan to upgrade immediately.

The planned set of back-ported features includes:

• Nitro engine;
• ESM and built-in TypeScript support;
• Composition API with Nuxt 3 composables and auto-imports;
• Nuxt CLI and Devtools;
• Vite integration.

Nuxt Bridge also simplifies upgrades for the whole Nuxt ecosystem. Legacy plugins and modules will keep working, the config file from Nuxt 2 will be compatible with Nuxt 3, and several Nuxt 3 APIs will remain unchanged to allow for a progressive upgrade.

Open Source Session Replay

OpenReplay is an open-source, session replay suite that lets you see what users do on your web app, helping you troubleshoot issues faster. OpenReplay is self-hosted for full control over your data.

Start enjoying your debugging experience - start using OpenReplay for free.

Bottom line

Overall, I personally can’t wait for Nuxt 3. Like many other Vue developers, I’ve been on the lookout for it for the past few months, and I’m thrilled it’s finally coming out to the public.

While performance improvements are impressive, as a TypeScript user, I’m most interested in the TS rewrite, as well as Vue 3 and Vite integration. These recently became my go-to technologies for personal projects, and it’d be great to see them integrated into a single framework.

Nuxt 3 will be a stepping stone in migrating the Vue ecosystem to Vue 3, encouraging other developers to upgrade or create new tools to enrich the new ecosystem. The community will undoubtedly benefit from the transition to TypeScript, adoption of Composition API, and performance improvements to both user-facing apps and the development environment itself, thanks to Vite.

So, there you have it! Those are many but certainly not all of the features you should expect to see in the Nuxt 3. Depending on when you read it, I hope you’re as eager to experience Nuxt 3 as I am, or maybe you’re already playing with it. Either way - have fun!