7 great features of Nuxt 3 - what you need to know
With the release of Nuxt 3 public beta in October, the Nuxt community’s growth soared due to its new features that allow developers to dedicate more time working on what matters most: creating great user experiences.
After the stable release of Vue 3 in late 2020, along with libraries and first-party tools migration, Nuxt 3 public beta was released last year in October.
Here at Barrage, we have been using Vue.js for over 5, and Nuxt for over 4 years. Nuxt powers almost all of our web applications and any project we start for our clients. It is a de-facto standard for any web application that needs SEO. Its server side rendering support gives us just that, and static site generation offers us even better performance.
Nuxt 3 is built with the modern web in mind. It has a forward-thinking approach to development and features that will take your projects into the future. In this blog, we will cover the improvements that were implemented and whether you should switch to it or not.
Features Nuxt 3 brings to the table
Nuxt 3 public beta brought about a lot of improvements to the framework. Here’s everything you might be curious about!
1. General improvements
There are various improvements and general optimizations. Various Tooling parts upgrades like ESBuild, Vite, PostCSS 8, Webpack 5, etc., support both production builds and development extremely fast. As a result, bundles are smaller, and the core is lighter than Nuxt 2 (20% lighter). There’s also better performance - developers notice this during development. All this is possible due to Nitro, an engine that does dynamic code splitting for production builds and cold-starts.
2. Vue 3
As Nuxt 2 is based on Vue 2, Nuxt 3 has been tailored for the newest versions of Vue, which gives it enhanced routing with its module system and suspense integration. The Composition API has new data fetching utilities that provide a smoother and more seamless content loading experience.
Vue 3 is now adopting ES Modules or ESM to provide an enhanced development experience. This move will also relate to Vue 3 and its entire ecosystem. Integrating tight TypeScript with Nuxt 3 will deliver type-checking for the codebase, which provides better error detection and auto-completion even without using TypeScript.
4. Nitro engine
Nuxt 3 brings a new server engine Nitro that delivers several performance improvements and some new features. Some of the benefits include:
- Hybrid rendering
- Cross-platform support for Node.js, Deno, Browsers, Service Workers, and more
- Dynamic server code-splitting
- Serverless support out-of-the-box
- Automatic code-splitting and async-loaded chunks
- Development server with hot module reloading
5. API layer
Continuing on Nitro, New API Layer will place in the new directory `server/`. We will be using `server/api/` and `server/middleware/` for API calls and server middleware functions, besides this. The API routes will also be coupled with an isomorphic fetching system, marking one step in the correct direction.
6. Hybrid rendering
Now you can get hybrid rendering with Nuxt 3. This will enable you features like Incremental Static Generation - a combination of SSR and SSG and other advanced modes will soon be possible.
7. Auto import
We are already familiar with the auto-import feature in the Nuxt world. By auto-importing components in `components/` folder and file-based routing in `pages/`, while in Nuxt 3, we get a new additional folder `composables/` that will automatically import the Composition API function that you define. With Typescript rewrite, Nuxt 3 steps provides even further automatic TypeScript type definition generation which gives us developers an even better experience.
So that's it from Nuxt 3...for now
Overall, I can’t wait to use Nuxt 3 in production. Like many other Vue developers, I have been testing Nuxt 3 beta version, and I’m thrilled so far with what it offers.
I’m most interested in the TS rewrite, as well as Vue 3 and Vite integration. These recently became my go-to technologies, and it’s great to see them integrated into a single framework that now supports Hybrid rendering. The community will undoubtedly benefit from lots of new features like cross-platform support, including Node.js, Deno, Browsers, Service Workers, and more, adoption of Composition API, and performance improvements to both user-facing apps and the development environment itself, thanks to Vite.
Those are some of the features you should expect to see in the Nuxt 3. Be sure to check out the new Nuxt 3 docs for all the features. I hope you’re excited to experience Nuxt 3 as I am, or maybe you’re already playing with it.
Your take on the subject
They say knowledge has power only if you pass it on - we hope our blog post gave you valuable insight.
If you want to share your opinion or learn more about Nuxt, feel free to contact us. We'd love to hear what you have to say!