05
NovNuxt 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.
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 buildDir
(.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 ~/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
@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 |
Nitro Engine | ❌ | ✅ | ✅ |
ESM support | ? Partial | ? Better | ✅ |
TypeScript | ☑️ Opt-in | ? Faster | ✅ |
Composition API | ⚠️ Deprecated | ✅ | ✅ |
Options API | ✅ | ✅ | ✅ |
Components Auto Import | ✅ | ✅ | ✅ |
script setup syntax | ❌ | ? Partial | ✅ |
Auto Imports | ❌ | ✅ | ✅ |
Webpack | 4 | 5 | 5 |
Vite | ⚠️ Partial | ? Partial | ? Experimental |
Nuxi CLI | ❌ Old | ✅ nuxi | ✅ nuxi |
Static sites | ✅ | ✅ | ? |
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.
Launch project