JavaScript: Framework Nuxt.js 3 supports TypeScript and integrates Vite.js


The release Nuxt.js 3.0 (Public Beta), a framework for developing graphical interfaces for web applications, relies on better performance with Nuxt.js Nitro.

Nuxt.js 3.0 is in the public beta version. In an interview with heise Developer , Vue.js developer Antony Konstantinidis focuses on major innovations and explains what changes for developers with the release. Konstantinidis has been working as a freelance full-stack developer, consultant and trainer for over twelve years. Mainly he deals with frontend development and is very happy with the development of and in Vue.js. With he founded the first German contact point for Vue.js in 2020.

Nuxt.js 3 followed the example of Vue.js 3. The development team has rewritten the framework from the ground up to provide built-in support for TypeScript and ECMAScript Module (ESM) with no additional configuration required. No more module.exports, almost anywhere can now finally the familiar export defaultsyntax to use. This gives us many advantages that affect the developer experience, even in projects that are still being implemented with JavaScript. This includes autocompletion in our development environment (IDE). Overall, these changes also result in a more compact package size for Nuxt.js, which has been reduced by a good 20 percent.

Nuxt.js 3 will support bundling via Webpack 5 and Vite.js , both during development and for production. This is really great news because at first Vite.js was only supported in development mode. Whichever version you choose, the result will always be a faster development experience and shorter production build times.

In addition to the aforementioned optimizations, Nuxt.js 3 also offers other improvements during development, including, for example:

  • Auto-import for components and functions from the Vue.js and Nuxt.js package.
  • A new Nuxt.js CLI for easier setup of a Nuxt.js project and module integration and maintenance.
  • Nuxt.js Devtools for faster and more comfortable debugging directly in the browser.
  • Nuxt.js Kit: easy development of modules that are compatible with both Nuxt.js 2 and Nuxt.js 3

When it comes to web development, things are changing incredibly quickly. The importance of fully rendered pages for a great user experience and SEO is now known to everyone. The JAMStack architecture is gaining momentum and more and more websites are using the power of CDNs (Content Delivery Network) and static pages with API calls. We’re moving to new and exciting environments like Web Workers and Deno (as an alternative to Node.js) and running web applications in more ways and platforms than ever before. To take this new reality into account, Nuxt.js Nitro was developed.

It’s the new rendering engine behind Nuxt.js. The result is a lean and highly optimized server (<1 MByte) without runtime dependencies on Nuxt.js itself, perfectly suited for so-called Edge Side Rendering (ESR). Nuxt.js applications can therefore run on almost any environment such as Cloudflare Workers, Netlify, Vercel, Firebase, Azure as well as AWS and other serverless environments. Nuxt.js Nitro is completely platform-independent and can be used almost anywhere. The reason for this is automatic platform detection and extremely intelligent polyfill generation for platforms on which certain APIs are not available.

With the new engine, it is now possible for the first time to use a mixture of SSR (server-side rendering) and SSG (server-side generation) in your own applications. You no longer have to opt for a global model, but can now even decide, down to the routing level, whether a page is static, pre-rendered, incrementally rendered or cached using an HTTP caching strategy. This enables you to implement the right performance strategy for your own applications and use cases. Daniel Roe’s talk is recommended on the topic .

Since Vue.js 3 we all know how extensive and tedious a migration to a new version can be. In addition to the main framework, all packages and modules also have to migrate and provide us developers with new versions that we can use in our applications before we can upgrade. So compatibility is a big issue. The Nuxt.js team is also familiar with the problems associated with a migration. That’s why we took care of an extra tooling that should make the switch to or stay on Nuxt.js 2 as pleasant as possible.

In addition, there is now even the possibility of benefiting from as many of the innovations from Nuxt.js 3 as possible, vice versa, i.e. when staying on a Nuxt.js-2 project. For this, a large number of the innovations from Nuxt.js 3 are also backported to Nuxt.js 2, including:

  • the TypeScript and ESM support
  • Nitro
  • the new CLI and Devtools
  • Vite.js
  • the composition API and the auto import-feature
  • Nuxt.js kit

In Nuxt.js applications, querying data could be a bit confusing, especially for new developers, as there have been many different ways to do it over time.

Before version 2.12, to render data on the server side, you had to use the asyncDatafunction, which is only available at the page level. The server-side rendering at the component level was not yet available at the time. That means we had to pass the data to our components as props. In addition, there was also the fetchfunction, which was also only available at the page level, but had a different purpose. Fetch was used to fill the store before a page was rendered.

With the release of Nuxt 2.12 it was fetch expanded enormously and many of the restrictions were lifted. The performance of Nuxt.js has increased significantly as a result and the way in which projects can be structured to make them even cleaner and more organized has changed.

Where there is light, there is also shadow. The multitude of configuration options of the new revised method of querying data was just one problem. The differences between the two versions of fetchand the presence of asyncDatawith a similar, but sometimes different purpose, as well as the fact that the native browser also fetchexists, often enough led to frustration and confusion among the developers.

But now we come to the special at the point. During a request, the user has to be shown the charge status somehow. In the past, you had to take care of the administration and exploitation of the condition yourself. Since Vue.js 3 and the Suspense Feature , Vue can handle asynchronous components. This means that my setupfunctions can now request data and wait for the result so that rendering does not take place unnecessarily, although the necessary data is not yet available. The suspense component can be used precisely in these application cases to relatively easily display fallback or error content.

By default, Nuxt.js 3 uses the same behavior based on the suspense component in order to further increase the user experience and to create an all-round good feeling for the user. Here, too, of course, as always with Nuxt.js: It is completely freely configurable if you do not want this behavior – either globally or depending on the application.

Share This:

Leave A Reply

Powered by FrontNet