What’s new in Nuxt 3?

Photo by Alex Sherstnev on Unsplash.

Directly inspired by Sebastien Chopin’s talks on Nuxt Nations (which shall be soon available on Youtube) and Daniel Roe’s talk at Vue.js Amsterdam 2021.

Nuxt 3 is going to be released very soon and brings a lot of entirely new things. It is not a simple upgrade to Vue 3, but a complete rewrite of Nuxt 2, with a new rendering server and, I believe, a new philosophy. The definition of Nuxt itself has changed (cf the official Nuxt website), it is not “a progressive meta-framework based on Vue.js” anymore but “an open-source framework making web development simple and powerful”.

Disclaimer: this is an article written right after the NuxtNation conference, where Nuxt 3 updates have been announced, and before the Nuxt 3 official release (on the 12th of October), so I apologize in advance for the lack of details on each point. The goal here is really to give a view at the macro-scale of Nuxt evolution. I will of course add more information as details are made available.

A bit of context

Before diving into the changes, let’s have a quick overview of the context in which these evolutions are made. And, on this point, I found the introduction of Daniel Roe’s talk extremely enlightening. He points out that some new trends are emerging in the JavaScript scene (and, more widely, in web development):

• serverless architecture and JAMstack: which enhance faster, more secure, and loosely coupled web applications. Indeed, the serverless architecture enables abstracting some part of logic from an application to a distant infrastructure. On the other hand, Jamstack fosters pre-rendering of front-end clients and the use of microservice APIs.
• the apparition of new targets: Deno, and ‘workers’, especially in serverless architecture (in that sense, this point is a consequence of the previous point).
• the transition to TypeScript and ES modules (enhanced by the apparition of new generation dev tools bases on ES modules, such as Snowpack or Vite)

So, as far as I understand, Nuxt 3 primarily aims to adapt to these global trends.

What's in Nuxt 3?

1. The support

• Enhanced TypeScript: Nuxt 3 has been rewritten in TypeScript, and, apparently, the support seems outstanding, with more information and links to documentation than in a standard TypeScript project
• Vue 3 (obviously): including composables and the experimental Suspense API
• Webpack 5 support
• Vite.js: for development and production

2. The very new and exciting things

• The brand-new rendering engine, Nitro:
  • Build for serverless (see below):
    • Cold start extremely fast (5 ms)
    • Universal: it can run on Node.js, Deno, serverless platforms (including cloudflare workers), and experimentally on web workers
  • Hybrid approach: Nitro enables mixing SSR and SSG in the same application
  • API routes: Nitro preconfigures the integration of API endpoints (with apparently a similar routing system with the one provided for pages)
• Nuxt CLI, which, bring many new possibilities
• Nuxt dev tools
• Global auto imports: to avoid the local import of very common functions (for example, “toRef” from the composition API)

3. The tools to make migrations and cross-version developments easy

• Nuxt bridge package, which gives support to most of Nuxt 3 features (excepted Vue 3) to Nuxt 2 projects
• Nuxt kit, which takes care of modules compatibility between Nuxt 2 and Nuxt 3

Built for serverless

To me, the most impressive breakthrough is Nitro, the new server that powers Nuxt 3. This is a subjective feeling after the conference, though, and maybe my mind will change when the repo is open (apparently, the new CLI would also bring many exciting new possibilities).

Cold start

Nitro is 75 times faster on start than Nuxt 2 engine, and only needs 5ms on cold start (and less in Cloudflare workers).
To handle this, Nitro works differently from traditional servers. Common servers would, on start, enable all their functionalities, whereas Nitro only starts the functionalities which are relevant to the incoming request. For this, it tracks which files are necessary for each request (with the nft, or Node File Trace, package from Vercel) and, according to that, cleverly code splits the server bundle. Then, on the incoming request, a minimalist "orchestrator" (which is based on the h3 framework, "built for high performance and portability" by the Nuxt core team and available on the unjs repo, cf below) decides which part of code to start.

Universal

Nitro can run on Deno and on any JS environment (Node.js and workers). In particular, the worker environment support enables Nitro to be run on serverless platforms and, experimentally, on browser workers.
To achieve this, the Nuxt team built themselves the set of libraries on which Nitro is based, which are available on the unjs repo. A key point of unjs (which stands for Universal JavaScript Solutions) is to provide libraries that can run on any environment of the JavaScript ecosystem.
Therefore, Nitro can build cross-platform outputs (for example, it auto-mocks Node.js builtins with polyfills in builds addressed to non-Node environments). Another interesting feature is that Nitro can auto-detect the platform on which it is deployed (Vercel, Netlify, Firebase, Cloudfare…) and adapt its build accordingly.

Conclusion

Nuxt definitely seems to have taken a turning point with this third version. I was personally astonished by this release announcement by the amount of updates and evolutions it brings. I really felt that Nuxt aims to provide innovations that exceed the goal of being “the Vue.js meta-framework”.

Comments

[Fashion86]

That's great. So Nuxt is useful more than Vue.js?

[Chris Violette]

Nuxt is a framework based on Vue; I wouldn't say it's "more useful", but more that it adds an opinionated foundation to help with SSR & SSG/static sites.

[Chris Violette]

It's more than "just a static site generator". It can run server side rendered sites, single-page apps, and generate static sites. The maintainers themselves describe it at a framework for Vue: nuxtjs.org/

[Yann]

@eshimischi that's just not true, it's an opinionated way to build Vue.js applications with a lot of powerful modules; and it's primary goal is to create dynamic server rendered sites built upon Vue.js; static sites export is a very useful option but not the core of Nuxt. (unlike Gridsome / Gatsby for example)