Nuxt is the backbone of your Vue.js project, giving structure to build your project with confidence while keeping flexibility.
Extendable with a strong module ecosystem and hooks engine, it makes it easy to connect your REST or GraphQL endpoints, favorite CMS, CSS frameworks, and more. PWA and AMP support is only a module away from your Nuxt project.

Nuxt 3 beta version has been released on October 12, 2021. You may be wondering what’s new in the Nuxt 3. So in this blog, I will share some exciting features of Nuxt 3. This release came prepared with interesting peculiarities and improvements to the development experience. On top of supporting Vue 3 or Vite, Nuxt 3 contains a new server engine, unlocking new full-stack capabilities to the Nuxt server and beyond. It’s the first JavaScript application server that is portable across a variety of modern cloud hosting providers. In production, it builds your Vue application and server into one universal .output directory. This output is light: minified and without any other Node.js dependencies (except polyfills). You can deploy this output on any system supporting JavaScript, whether Node.js, Serverless, Workers, Edge-side rendering, or purely static. Let’s discuss it in detail.

What’s New in Nuxt 3?

A Brand New Server Engine

Nuxt 3 is powered by a new server engine, code-named “Nitro”. It is a platform-independent and lightweight server that has no Nuxt runtime dependencies. It opens new full-stack capabilities for Nuxt by enabling you to create API routes like you would create pages directly in your Nuxt app. Nuxt Nitro is quick to start, perfect for edge-side rendering (a more performant type of rendering with lower latency network calls), and you can deploy it anywhere. Nitro is 75 times faster on start than Nuxt 2 engine, and only needs 5ms on cold start (and less in Cloudflare workers).

This engine has many benefits:

• Cross-platform support for Node.js, Browsers, service-workers, and more
• Serverless support out-of-the-box
• API routes support
• Automatic code-splitting and async-loaded chunks
• Hybrid mode for static + serverless sites
• Development server with hot module reloading

Full TypeScript Rewrite

Nuxt 3 is completely rewritten in Typescript and provides helpful shortcuts to ensure you have access to accurate type information when you are coding. One of the big benefits of Typescript is to enable IDEs to provide a richer environment for spotting common errors as you type the code. In Nuxt 3, When you run nuxi dev or nuxi build, the following files are generated for IDE type support (and type-checking):

.nuxt/nuxt.d.ts

This file contains the types of any modules you are using, as well as the key types that Nuxt 3 requires. Your IDE should recognize these types automatically.
Some of the references in the file are to files that are only generated within your buildDir (.nuxt) and therefore for full typings, you will need to run nuxi dev or nuxi build.

.nuxt/tsconfig.json

This file contains the recommended basic TypeScript configuration for your project, including resolved aliases injected by Nuxt or modules you are using, so you can get full type support and path auto-complete for aliases like ~/file or #build/file.

Better Vue 3 and Vite Support

Nuxt 3 was built to support Vue 3 features. With Nuxt 3 being written in Vue 3, you can access peculiarities like the Composition API, better module imports, and overall improved app performance. Vue 3 offers better performance, better tree-shaking, smaller size, improved TypeScript support, and some revolutionary new features for developing large-scale enterprise software. Nuxt 3 also comes with Vite support, which is backward compatible with Nuxt 2. Vite is a build tool that significantly improves the front-end development experience. You can use Vite to set up a development environment for frameworks like Vue.

Developer Experience Improvement

• The Nuxt 3 offers an improved Command-line interface with Nuxi. The Nuxi now comes with a new modules interface built-in, and it helps you run commands faster and more efficiently.
• Nuxt 3 offers a better Development experience with @nuxt/kit. The Nuxt Kit is essentially a Nuxt SDK that shows key Nuxt functionality to users and module authors in ways that will continue to work no matter how the Nuxt core shifts in the future.
• Nuxt suspense is implemented with the new Vue 3 suspense component. Suspense is a special component that renders fallback content instead of your component until a condition is met. This condition is usually async operations happening in your components.

Comparison

In the table below, there is a quick comparison between 3 versions of Nuxt:

Note

Nuxt 3 is currently in beta, keep in mind that it is not yet production-ready. So you can not use it in production.