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.
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.
- 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
- 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)
- Build for serverless (see below):
- 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)
- 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
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).
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.
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.
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.
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”.