What’s new in Nuxt 3?
Tags: vue, javascript, nuxt, webdev
Published: 2021-10-03 16:31:04

*Photo by [Alex Sherstnev](https://unsplash.com/@alexxingplus?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText) 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](https://www.youtube.com/watch?v=ApUPE8b-m04).*

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](nuxtjs.org)), 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](https://www.youtube.com/watch?v=ApUPE8b-m04) 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](https://github.com/vercel/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](https://github.com/unjs), 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](https://github.com/unjs). 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”.