Nuxt.js 3.0 is in the public beta version. In conversation 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 Vuejs.DE he founded the first German point of contact for Vue.js in 2020.
heise Developer: Nuxt.js 3 Public Beta is here, what are the general optimizations or innovations?
Antony Konstantinidis: First of all, if you have been hesitant to use Nuxt.js because it doesn’t support Vue.js 3, the wait is over! Nuxt.js 3 is built with the latest version of Vue.js and will therefore take full advantage of the Vue.js 3 framework. That alone gives you an immense performance boost. On top of that there are other features like that Composition API and the script setup-Syntax.
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. enough of module.exports, almost everywhere you can finally get the familiar export default-Use syntax. This gives us many advantages that affect the developer experience, even in projects that continue to be 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 is bundled using Webpack 5 and Quick.js support, both during development and 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
Nuxt.js 3: The highlights among the new features
heise Developer: What are the top 3 new features?
Konstantinidis: The top 3 features of the new version include Nuxt.js Nitro, Nuxt.js Bridge and the revised data acquisition and integration of Suspense.
When it comes to web development, things are changing incredibly quickly. Everyone knows the importance of fully rendered pages for a great user experience and SEO. 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 (
heise Developer: What other advantages does Nuxt.js Nitro offer?
Konstantinidis: Another advantage of Nitro is its performance. The Nuxt.js team attached great importance to the cold start performance. Cold starts can be defined as the setup time required to get a serverless application’s environment up and running when it is first invoked within a specified amount of time. In Nuxt.js 2 this time is around 250 milliseconds, in a Nuxt.js-3 application based on Nitro it only takes 5 milliseconds to start the application. In comparison, cold starts are 75 to 100 times faster.
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 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. That fits the topic Talk from Daniel Roe to be recommended.
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.
heise Developer: What does the Nuxt.js Bridge bring?
Konstantinidis: Nuxt.js Bridge simplifies upgrades for the entire Nuxt.js ecosystem. Older plug-ins and modules still work, the configuration file (nuxt.config.js) from Nuxt.js 2 is compatible with Nuxt.js 3 and several Nuxt.js-3 APIs remain unchanged to allow for a progressive upgrade. That alone is a really excellent achievement and shows how important the community and users of the framework are to the team.
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:
- der TypeScript- und ESM-Support
- Nitro
- the new CLI and Devtools
- Quick.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, in order to render data on the server side, you had to use the asyncData-Use a function that 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 fetch-Function that 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, fetch enormously expanded and many of the restrictions have been 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 the fetch and the presence of asyncData with a similar, but partly different purpose as well as the fact that there is also the native browser fetch exists often enough to create frustration and confusion among developers.
heise Developer: What does Nuxt.js 3 offer to counteract this confusion?
Konstantinidis: With Nuxt.js 3, the two functions have now been converted into a new composable called asyncData merged. Like all other Composition API functions, it can therefore be used in any component. You can freely decide whether the navigation should then be blocked until the query is completed or not. It also ensures that the data is only requested once on the server and not again on the client.
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 but Vue can handle asynchronous components. That means mine setup-Functions can now request data and wait for the result so that a 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.
