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
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.
Let’s go over the most significant aspects of the new heart.
When you build your app, and it is time to deploy it, you now have many more options than previously. This is because the resulting output is minified, and “without any other Node.js dependencies (except polyfills).” The result? You can deploy your app anywhere: Server, Serverless, Workers, Edge-side rendering… There are four presets configured, and ready to go, out of the box:
Node.js server (default)
Node.js function (Nuxt can be attached as middleware to any Node.js server)
Lambda function (serverless platforms)
Service worker (edge-side rendering: no dependency on Node.js)
For Nuxt.js 2 users, who are not willing to jump to the new version, there is good news — the new engine can be used with the older iteration of the framework thanks to the Nuxt Bridge.
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.
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 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: