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.
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).
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):
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
(.nuxt) and therefore for full typings, you will need to run nuxi dev or nuxi build.
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
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
@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.
In the table below, there is a quick comparison between 3 versions of Nuxt:
|Feature / Version||Nuxt 2||Nuxt Bridge||Nuxt 3|
|Stability||😊 Stable||😌 Semi-stable||😬 Unstable|
|Performance||🏎 Fast||✈️ Faster||🚀 Fastest|
|ESM support||🌙 Partial||👍 Better||✅|
|TypeScript||☑️ Opt-in||🚧 Faster||✅|
|Composition API||⚠️ Deprecated||✅||✅|
|Components Auto Import||✅||✅||✅|
|script setup syntax||❌||🚧 Partial||✅|
|Vite||⚠️ Partial||🚧 Partial||🚧 Experimental|
|Nuxi CLI||❌ Old||✅ nuxi||✅ nuxi|
|Composition API||❌||🚧 Partial||✅|
Nuxt 3 is currently in beta, keep in mind that it is not yet production-ready. So you can not use it in production.
Published at : 05-11-2021
I am a highly results-driven professional with 12+ years of collective experience in the grounds of web application development especially in laravel, native android application development in java, and desktop application development in the dot net framework. Now managing a team of expert developers at Codebrisk.