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.
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.
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)
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).
An underdiscussed benefit of JS over TS - I'll frequently test individual functions by pasting them into the browser console. There's no faster feedback loop. You can't do that with TS. JSDoc TS means extra keystrokes, but overall the ergonomics are waaaay better https://t.co/qCEYq3E4Lg
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.
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:
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.
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.
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.
360° IT Check is a weekly publication where we bring you the latest and greatest in the world of tech. We cover topics like emerging technologies & frameworks, news about innovative startups, and other topics which affect the world of tech directly or indirectly.