💡 Release Candidates are beta versions that have the potential to be released as stable. This means that no major breaking changes are expected until the stable release.

The Nuxt 3 Beta was announced on October 12, 2021 after 16 months of work, with a new foundation based on Vue 3, Vite and Nitro.

Today, six months later, we are happy to announce the first release candidate for Nuxt 3, code named “Mount Hope“ 🚀

Since the beta, we’ve merged 1000+ pull requests, closed 900+ issues, made 2000+ commits and seen 3600+ open source repositories using Nuxt.

It’s not just the Nuxt core team; more than 160+ contributors have been helping us. And we are grateful to see amazing adoption by our beta testers: 5000+ stars and 340k+ downloads in 6 months 💚

You can check the release notes if you are migrating from a previous version of Nuxt 3.

A new foundation

Vue 3 & TypeScript

Vue 3 has been the new default for 3 months, bringing better performance, the composition API and TypeScript support. Nuxt 3 builds on these improvements to provide a great Vue 3 experience with first-class SSR support.

Since Nuxt 3 has been rewritten in TypeScript, it is fully typed and provides helpful shortcuts to ensure you have access to accurate type information when you are coding.

On top of this, Nuxt will automatically generate a TS config (.nuxt/tsconfig.json) and a global types file (.nuxt/nuxt.d.ts) for you to get a full TypeScript experience with zero configuration.

Furthermore, you can run the npx nuxi typecheck command to manually check your types within your Nuxt application, or even enable build or development type-checking if you prefer.

Read more about TypeScript in Nuxt 3.

Vite & Webpack

We decided to make Vite the default bundler for Nuxt apps. We’re big fans of the work done by Evan You with Vue 3 and after seeing the work done by the fabulous Vite community, it was an easy choice to bet on it.

Equally, keeping Webpack support is important for us. It is a mature build tool and can ease the migration for Nuxt 2 projects.

This means Nuxt 3 officially supports both Vite and Webpack.

To use Webpack 5, enable it in your Nuxt config, and install @nuxt/webpack-builder:

import { defineNuxtConfig } from 'nuxt'
export default defineNuxtConfig({
  builder: 'webpack' // default: 'vite'
})

As part of our deep integration with both Vite and Webpack, we also created unjs/unplugin: a unified plugin system for build tools, which enables writing universal plugins that work in Rollup, Vite and Webpack.

We've laid the foundation for making Nuxt a builder agnostic framework and are preparing it for JavaScript’s perpetually evolving ecosystem.

A further note on performance: we are pushing forward vite-node and Webpack lazyCompilation, bringing on-demand bundling for the server bundle of your Nuxt application: No matter how big your application becomes, Nuxt will always start in a few seconds.

Nitro & UnJS

One of the major features of Nuxt 3 is its new server engine unjs/nitro making Nuxt a powerful full stack and provider-agnostic framework.

Why Nitro?

The first pain point in Nuxt 2 was a lack of robust server integration. We had serverMiddleware but the developer experience was not great. It lacked alias support and was unstable.

Secondly, the production server was not optimized to work in a lambda environment; boot time was slow and install size was big.

Nitro takes Nuxt to another level with multiple features:

• Hot module replacement for the server/ directory
• Server routes with file system similar as the pages/ directory
• Portable and compact deployments without node_modules dependency
• Route caching and static pre-rendering with built-in crawler
• Code-splitting and async chunk loading for fast server startup time
• And much more…

This means that Nuxt 3 and everything you use in your project are now devDependencies. Nitro will take care of code-splitting and bundling everything into a portable and compact .output directory ready to be deployed to any hosting provider.

Here is a small video showing what it looks like.

Unified JavaScript Tools

In 2018, we started creating reusable and framework-agnostic JavaScript libraries such as unjs/consola and unjs/ipx. These libraries are small, well-tested, and compatible with each other to benefit the entire JS ecosystem. Today we have a bigger collection of them in a new GitHub organization called UnJS. This organization is made for offering a set of ESM friendly JavaScript tools suitable for running in any JavaScript environment including Node.js, Deno, Browsers and Workers.

By working on this foundation for over 4 years, we are progressively making Nuxt capable of running everywhere and exploring ideas beyond our imagination!

Check out https://github.com/unjs to discover all the packages powering Nuxt 3.

Powerful features

File System Automation

Pages

It all started with the pages directory: every file is mapped to a route. We were the first in the frontend framework ecosystem to support dynamic and nested routes, thanks to the amazing work done by the Vue team on vue-router.

The pages directory remains, featuring an improved syntax for dynamic routes that allows multiple parameters in a single route. Moreover, the pages directory is optional! You can start your project with only an app.vue file and Nuxt will use a minimal universal router instead for an optimized bundle size (saving 28kB, 21% tinier out of the box).

Take a look at the migration guide for pages for more details.

Plugins

Every file in the plugins directory will be automatically imported and run before creating the main component (app.vue).

Components

The components directory is another piece of art; every component inside will be available in your templates, no imports required. Nuxt will then analyze your code, only including the components you use in the final bundle, bringing both great developer experience and performance for production.

Composables

Thanks to Vue 3 and the Composition API, we've created a new composables directory to automatically import your Vue composables into your application.

Public

The static directory has been renamed to public and serves all your raw files (like favicon.ico, robots.txt, etc.).

Server

Lastly, a new server directory came with powerful features to add server routes and backend logic to your Vue application.

Modules

Nuxt exposes a powerful API for creating modules. Modules are pieces of code that sequentially run when starting nuxt in development mode or building a project for production. They allow you to encapsulate, test and share custom solutions as npm packages without adding unnecessary boilerplate to your project itself. They can hook into lifecycle events of the Nuxt builder, provide runtime app templates, update the configuration or do any other custom action based on needs.

We improved module syntax in order to give better defaults, typings and compatibility between Nuxt versions thanks to Nuxt Kit: a set of utilities to make interacting with Nuxt internals super easy.

Take a look at the module author guide or explore the Nuxt 3 compatible modules.

Thank You

We are impressed every day by our community being so helpful in many ways: issues, discussions, articles, videos and modules 💚

If you haven’t yet and want to show your support:

• Join us on Discord
• Follow us on Twitter
• Star Nuxt 3 on GitHub

This is the beginning of a new chapter for Nuxt, now it’s time for you to start a new Nuxt 3 project.