Nuxt.js 3 Release Candidate Is Here [UPDATED]

2022/04/26 Update: We have updated this article to reflect the changes that the Nuxt.js team had made ever since we first published the article. We have also added additional information, and added a YouTube video at the end.

‍
Summary

• Nuxt.js has recently received a “Release Candidate” status, which means the initial status release is just around the corner;
• There are two rendering modes, with a “hybrid” mode coming;
• The new Nuxt is a marvel of web development, and it will be interesting to see what the leaders will come up with;
• Angular is also in trouble, as the framework has almost no tools such as Nuxt.

Hybrid JavaScript Web Frameworks are taking the world by storm, providing easy setup, and a great Developer Experience. For React, it's Next.js. For Vue.js, one of the default choices is Nuxt.js. React vs Vue dispute aside, the improved framework is the focal point of this article for a good reason. We have recently seen a Release Candidate, and it's big news for everybody. Authors of other frameworks will have to be careful because they surely will feel more pressure from now on.

Vue 3

It took some time until the users of the hybrid framework were able to adopt the new version of Vue. It was worth waiting for it, as the new version of the front-end framework ushers in new features and improvements:

• Composition API
• Teleport
• Fragments
• Emits Component Option
• createRenderer API from @vue/runtime-core to create custom renderers
• SFC Composition API Syntax Sugar (<script setup>)
• SFC State-driven CSS Variables (v-bind in <style>)
• SFC <style scoped> can now include global rules or rules that target only slotted content(opens new window)
• Suspense

The time to use the new release of the library has come, as developers were asking often, about the possibility to use Vue 3 with Nuxt.

A Complete Rewrite in TypeScript

Nuxt 3 is a complete rewrite of the old framework. The commit containing the new code written in TypeScript saw the light of day with the commit from July 2nd, 2020. Even though the fact was not known to the wider public (no mention of it to the wider audience, nor was it released) it was a silent sign of an upcoming revolution; a silence before the storm.

Undoubtedly, many will see the change as a promise of more safety and fewer surprises. It is interesting to note, however, that some high-profile open-source developers are moving away from TypeScript internally, in favor of extensive comments in code (JSDoc comments).

Universal, Client, Edge, or Hybrid?

So far, the framework operates in two ways. It either will generate a nearly client-only web app, or an app that it prerenders on a server, before sending it to the user (Universal).

We are yet to see two more modes. The first one is the Edge mode, where you will be able to configure everything to run on an Edge node (a fancy way of saying as close to the user as possible). Apps, such as chat apps, will be ones to benefit a massive deal from this, as latency here is everything. The Hybrid approach, so the last piece of the puzzle, is the way to have some pages static, while others to render fully in the client. We will illustrate it with an example.

We have a banking app. The marketing side of it (such as the landing page, a promo page, services, etc.) has to be generated on the server for optimal SEO. The part, which users see after logging in, does not have to be rendered beforehand. Quite frankly it's a bit pointless, too, as we want to exclude these pages from indexing, anyway.

Nitro-boosting the Engine

The engine behind the “Intuitive Framework” is now “Nitro.” The new foundation “unlocks” new full-stack capabilities, while also turning Nuxt into “only” a dev dependency(!). As a result, this further decreases the size of your apps. Of course, the smaller the size, the faster it loads.

Let’s go over the most significant aspects of the new powerhouse behind the Vue.js framework.

Universality

When you build your app, and it is time to deploy it, you now have many more options than previously. There are many presets configured for you, ensuring your apps work with numerous cloud providers:

• AWS
• Azure
• Vercel
• Firebase…
• … and seven more.

Of course, if you value independence, and if you want to host your app on-premises, then you may always build an app so that you have a regular Node.js server at the end of the day.

In case you would like to see examples of cloud configurations for web apps, you may do so in our post titled “Turning Node.js Apps Up To Eleven With Serverless.”

Automatic Code Splitting

Big chunks of code that users have to load upfront are the bane of all existence. Pages load longer, everything is slower, and your SEO can take a hit as well. Luckily, Nitro takes care of it for you, automatically. What happens behind the scenes, is that the big chunks of code that are not necessary can get split up, and loaded separately, 

After all, it is one thing, to enable developers to make good apps, and another is doing it for them.

API Routes

This is not a new concept, by any means, though there is a spin on them. A new framework is the foundation for the functionality. H3, which is at the core of API Routes, is a zero-dependency” piece of code that’s “minimal”, and “built for high performance and portability.” Perhaps the most significant feature is the possibility to bring legacy code up to speed, and “promisify” it; make use of native Node.js promises. For details, on H3, please refer to the project’s GitHub page.

The easiest example of how to write an example API route is:

Of course, if you want to write Express-style route handlers, you still may. One catch is that they are discouraged, as the documentation refers to them as outdated. An example of the handler written in the old way is here:

‍

Of course, if you will want to use Express.js, you will be able to.

Conclusion

To end with, Nuxt 3 is a big step forward for the framework. There are many much-needed features and improvements that many requested for a long time. With that being said, it is still in beta, which means that the time for a change did not come yet. It is simply not production-ready — yet. Of course, if you want to experiment with the framework, and take it for a spin, you can definitely go for it. 

To get started, open your terminal, navigate to the folder you want to have your app in. Afterward, type these lines in:

‍

We also recommend looking at the video from Fireship on YouTube. We checked, and we promise, your mind will not actually explode.

‍