Table of Contents

Nuxt.js 3 Public Beta Is Here

Hybrid JavaScript Web Frameworks are taking the world by storm, providing easy setup, and a great Developer Experience. For Vue.js, one of the most popular Web Front-End Frameworks, almost the default choice is Nuxt.js. It’s the focal point of this article for a good reason. The tool just got a new release, and it is a significant one.

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).

Webpack 5 in Nuxt 3

Webpack is probably the most popular bundler for the internet. The new release focused on few aspects:

  • Improve build performance with Persistent Caching.
  • Improve [Long-Term] Caching with better algorithms and defaults.
  • Improve bundle size with better Tree Shaking and Code Generation.
  • Improve compatibility with the web platform.
  • Clean up internal structures that were left in a weird state while implementing features in v4 without introducing any breaking changes.
  • Prepare for future features by introducing breaking changes now, allowing us to stay on v5 for as long as possible.

For the end, Nuxt.js, users this in practice means your code can be faster, and smaller, without changes to your codebase. Now that’s what I call a great success.

As a side-note, this is just one of the options for the bundlers, as Evan You’s Vite is also an option.

Turbocharging 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.

Let’s go over the most significant aspects of the new heart.

Universality

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.

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 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:


Categories:
Share

Related articles

© 2021 ITMAGINATION. All Rights Reserved. Privacy Policy