Nuxt 3 Beta

Studio Terabyte i§s a full stack web development studio who finds and builds solutions that fit your project

What is Nuxt 3?

Nuxt 3 is the next major version of the popular open source Vue framework Nuxt. This framework takes all the is great in Vue and adds a number of extra features on top to make building modern websites an even greater experience. Not only that, it helps enforce conventions, is SEO friendly and allows you to create static sites for your JAM stack project.

What has changed?

https://vueschool.io/articles/news/whats-coming-in-nuxt-3/https://blog.openreplay.com/nuxt-3-is-coming-here-s-what-you-need-to-know

There are a lot of things that have been changed, but we will discuss the highlights here.

Vue 3

One of the biggest changes is that Nuxt 3 is built on Vue 3. This means:

A general improvement in performance
The use of the Composition API
New features such as Vue Router 4 and Suspense

TypeScript

Besides being based on Vue 3, Nuxt 3 also adopts ES Modules (ESM) and TypeScript.

TypeScript is a superset of JavaScript that has optional typing and compiles to plain JavaScript. This means that you can now make your Nuxt project codebase more reliable and explicit by adding types. This helps prevent erros sooner in your development cycle.

Nitro

Nuxt 3 will use a new server engine: Nitro. This new engine adds a number of exciting new capabilities such as:

Optimized output after running nuxt build into a new .output folder minified and removed from any Node.js modules (except polyfills). This can easily be deployed on any platform that support Javascripts, from Node.js, Serverless, Workers, Edge-side rendering or purely static.
Faster cold starts with dynamic server code-splitting (from 250ms in Nuxt 2 to 5 ms in Nuxt 3)
Supporting a mix of static site generation and server side rendering (see Hybrid Rendering below)
Generate API routes based on a server/api/ directory (see API Routes below)

Hybrid Rendering

Nuxt 3 introduces “incremental static generation” or hybrid rendering. This means that you no longer have to choose between full static generation, such as this site, or server side rendering. Now you can do static-generation on a per-page basis, without needing to rebuild the entire site. With ISR, you can retain the benefits of static while scaling to millions of pages. Next.js already offers this as a feature

API Routes

As mentioned, one of the benefits of the new Nitro engine is the ability create and run server API code. Simply add the API route files to the new /server/api/ directory and call them like you would with any normal API. So you could add somthing like this to /server/api/test.ts

import type { IncomingMessage, ServerResponse } from 'http'

export default async (req: IncomingMessage, res: ServerResponse) => {
  res.statusCode = 200
  res.end('Works!')
}

Other New Features

Besides the highlighted features, many more great things are to come such as:

Optimized output for faster, lighter builds
Nuxt CLI for easy scaffolding and module integration
Nuxt Devtools for info and quick fixes right in the browser.
fast HMR by using Vite as your bundler.

Should you update?

At the time of writing, November 11 2021, Nuxt 3 is still in Beta. This means that it is a great time to experiment with the new features, but it is not ready to be used in production just yet. You can keep an eye on the offical website for changes.

There is one thing you can do in the meantime though. Nuxt 3 also introduced Nuxt Bridge which aims to bring Nuxt 3 features into Nuxt 2 so that you can already get used to them in order to enhance the migration experience.