Nov 24, 2021

Nuxt2 vs Nuxt3 - What's new?

It's no surprise that I use NuxtJS extensively. In fact, this website itself is built using  NuxtJS.

While Vue had been already upgraded to version 3, bringing about some of the great features and improved performance, Nuxt took its sweet time (mind I say a lot..?) to migrate its underlying foundation to Vue3 (Nuxt is a framework, built over Vue).

But it's finally here.. And I don't know about you...But I'm hella excited.

Currently, the build is in public Beta. But we can expect to get the full release in the next few months.

What's New?

Let's first discuss the new over and underhood improvements.As Nuxt's official website mentions -

Built on VueJS3 - The Latest and Greatest(?)

Nuxt3 has been re-written from the ground up using VueJS3. This brings a host of new features -

1. Conditional suspending of component rendering via Suspense api.
2. More flexibility for global mounting
3. Virtual DOM rewrite for better performance and improved TypeScript support

The all-new Nitro Engine

The much (if not the most) hyped feature of Nuxt3!

Nitro is the new rendering server for Nuxt3. You can easily feel its presence when you spun up the development server. Some Nitro features -

• It's built for serverless architectures.
• Extremely fast cold-start of just 5ms. I remember waiting for a minute for my old Windows laptop to start the development server?‍?. My new Macbook Pro(review coming soon) loads in under 5 seconds?.
• Nuxt3 is planned to support ISR (Incremental Static Regeneration) using Nitro renderer.

Native Composition API support

VueJS3 was released with a game-changing build API called as  Composition API. This basically transformed how you write code in VueJS.

Nuxt also got a composition API. Well... Sort of! ?

Nuxt 2 relied on an external library @nuxtjs/composition-api for adding the functionality.

With Nuxt3, you have the composition API built-in which is obvious as Nuxt3 is built on top of VueJS3. If you have no idea about Composition API, check out the below article which brings out the contrast between the two - coherently.

Native TypeScript Support

If you have a large application at your hand. TypeScript is a lifesaver. It makes maintaining your codebase much easier and also reduces bugs.

In Nuxt2, this was again achieved using external libraries. A number of configurations had to be done to get proper support.

With Nuxt3, you get TypeScript support out of the box.

Faster Hot reloads with Vite

Nuxt3 now uses Vite for HMR(Hot Module Replacement). HMR, for those of you who don't know, is used when the server re-renders the updated components of your application both in development and production. I have used Nuxt3 and the hot reload is faster, much, much faster!

Performance Improvements

Nuxt3 has up to 75 times (read that again) smaller server deployments and client bundles. With so many improvements like enhanced renderer, faster Hot Reloads, Webpack 5 improvements, Native support to TypeScript, and Composition API - I have no doubt that Nuxt3 is going to have vastly better performance than its older counterpart.

Honorable Mentions

Some more salient features of Nuxt3 -

1. A new Nuxt CLI - nuxi
2. NuxtJS Dev tools (if you have used Vue Dev tools, you know what I am talking about)
3. Global auto imports of common functions such as ref.

Some Caveats and Migration Strategy

Pending Issues

There are naturally various compatibility issues with the framework. I was trying to use tailwindcss for styling but I couldn't get it to work after quite a lot of configuration changes and googling. The Github repository of Nuxt3 itself has a number of pending issues. The community is also tenated to resolving them as well. So it won't be long before we get the full release.

Migration from Nuxt2

There is no migration guide to Nuxt3 from Nuxt2 at the moment. However, the good guys at Nuxt have released Nuxt Bridge for using most of the features of Nuxt3 with Nuxt2. Please check the above documentation link for a full guide.

Conclusion

So! A pretty feature-packed release(to be) I would say!

Nuxt3 is still in public beta and I can't wait for the full release. It's here to stay so no hurry in upgrading. I have planned to upgrade this website's stack to Nuxt3 once the framework becomes more stable.

If you have a big application and you can't afford to upgrade it anytime soon, try going for Nuxt Bridge?? above. I can assure you that the upgrade is worth the performance and developer experience gains!

Next, check out my review of Macbook Pro 2021 14 inches from a developer's perspective. ??‍?

Until then, Adios!