)](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2400%2F1%2AL_BbTRbEGswsniTONwErAQ.png)
Nuxt 3 beta was announced on October 12, 2021 after 16 months of work, introducing a new foundation based on Vue 3, Vite and Nitro. About 6 months after the beta version was announced, the first Release Candidate for Nuxt 3 called “Mount Hope” was announced.
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.
Vue 3 & TypeScript
Nuxt 3 is built to provide a great Vue 3 experience along with great SSR support.
Nuxt allows you to experience TypeScript with zero configuration. It automatically creates a TS configuration (.nuxt/tsconfig.json) and a generic type file (.nuxt/nuxt.d.ts) for this.
To learn more about TypeScript in Nuxt 3, you can read the related document.
Vite & Webpack
With Nuxt 3, Vite became the default bundler. Vite is a wrapper that aims to provide a faster development experience for modern web projects. Nuxt 3 also supports packaging with the latest version of Webpack (version 5).
Nitro Server Engine
One of the most important features of Nuxt 3, the new server engine is unjs/nitro. Nitro allows us to create API paths outside of pages in Nuxt. In this way, it provides the opportunity to develop full-stack. In addition, it provides the opportunity to distribute Nuxt application to any system that supports JavaScript (Node.js, Serverless, Workers, Edge-side rendering, etc.).
)](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2004%2F1%2AT-FM0B3EH3VEv_g4P4TWGw.png)
Nitro Engine also supports adding middleware to API endpoints. Nuxt reads all files in the /server/middleware directory to build middleware for your project and these files are executed on every request. This is usually used so that you can add a common header to all responses, log responses, or modify an incoming request object.
Click to watch a sample video about Nuxt server engine.
Nuxt Bridge
Nuxt Bridge is a layer created to make the transition from Nuxt 2 to Nuxt 3 as easy as possible, allowing you to experience many of the new Nuxt 3 features. Using Nuxt Bridge you can make sure your project is ready for Nuxt 3. To experience Nuxt 3 features in existing Nuxt 2 projects, you need to install @nuxt/bridge-edge in your project. Installation steps and more information can be found here.
Nuxt Bridge, to make the upgrade as easy as possible:
Backward compatibility for nuxt.config.js used with Nuxt 2,
Nuxt 2 supports backward compatibility for modules and plugins.
At the same time, new features that came with Nuxt 3 have been brought to Nuxt 2. In this way, the transition from Nuxt 2 to Nuxt 3 can be carried out gradually. Some of these features are:
Using Nitro server engine with Nuxt 2,
Using Composition API (same as Nuxt 3) with Nuxt 2,
Using new CLI and DevTools with Nuxt 2,
Progressively upgrade to Nuxt 3,
Compatibility with Nuxt 2 module ecosystem,
Upgrade piece by piece (Nitro, Composition API, Nuxt Kit)
In the image below you can see the comparisons between Nuxt 2, Nuxt Bridge and Nuxt 3 versions.
)](https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fcdn-images-1.medium.com%2Fmax%2F2000%2F1%2A5StVHeYooZgJ55A4JUjgJw.png)
Nuxi
Nuxi (Nuxt CLI) helps you create new projects with zero effort. It’s also backwards compatible, so you can still enjoy some of its benefits even if you’re on Nuxt 2.
Nuxt Kit
Nuxt Kit aims to make developing Nuxt modules easier. It provides users with a new flexible module development experience with cross-version compatibility. In this way, it allows the development of modules that will work on both Nuxt 2 and Nuxt 3.
In summary, we can say about Nuxt 3:
It supports webpack 5 and Vite, which supports hot module replacement during development and assembles your code for production,
It uses esbuild so you can write the latest JavaScript syntax while supporting older browsers,
It uses Nuxi for Command line interface,
It uses Nitro as the server engine,
It uses Nuxt Kit as development kit,
It uses Nuxt Bridge to ease the migration from Nuxt 2.
Top comments (0)