7 great features of Nuxt 3 - what you need to know

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 is a framework built on Vue.js that provides exceptional development features like auto-generated routes and server-side rendering, which improves SEO. Nuxt’s goal is to make it easy for developers to build universal applications with Vue without the need of configuring any backend frameworks or build systems in JavaScript from scratch - all the while delivering lightning-fast performance by default! Since its launch, the Nuxt ecosystem has increased due to its simplicity and powerful features that allow you to focus less time worrying about your app’s architecture and more time working on what matters most: creating great user experiences.

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.

3. TypeScript

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!