Nuxt 4.0 improves project organization, data fetching, TypeScript support

Nuxt 4.0, the latest version of an open source web development framework for writing Vue components, has arrived, centered on improvements in project organization, data fetching, and TypeScript support. The whole intent of Nuxt 4.0 is about making the development experience smoother, according to the project’s authors.

Unveiled July 15, Nuxt 4.0 improves TypeScript support with project-based separation between the different contexts in a project — app code, server code, shared/ folder, and configuration, said Daniel Roe, leader of the Nuxt core team. This should translate to better auto-completion, more accurate type inference, and fewer confusing errors when working in different contexts, Roe said.

Nuxt 4.0 changes how projects are organized. Application code now lives in an app/ directory by default. This helps keep code separate from node_modules/ and.git/, which makes file watchers faster, particularly on Windows and Linux. This also gives an IDE better context about whether a developer is  working with client or server code. Updated UI templates, meanwhile, have an all-new look, with improved accessibility, default titles, and template polish.

Also highlighted in Nuxt 4.0 is what Roe described as smarter data fetching. As part of this effort, useAsyncData and useFetch have been made to work better. Multiple components using the same key now share data automatically. Additionally, the framework now performs automatic cleanup when components unmount, and developers can use reactive keys to re-fetch data when needed. Developers also now have more control over when cached data gets used. Nuxt’s builders expect to continue work on this data layer.

In parallel with Nuxt 4.0, Nuxt’s developers have worked on speeding up @nuxt/cli. Faster development server startup, automatic reuse of the V8 compile cache, native fs.watch file watching, and socket-based communication between the CLI and Vite dev server make a really noticeable difference in the day-to-day development experience, Roe said.

Finally, Roe stressed that a main goal for the Nuxt 4.0 release was to ensure that the upgrade path is as smooth as possible. Most of the breaking changes have been testable with a compatibility flag for more than a year. He said most projects should upgrade smoothly, but there are a few things to be aware of:

Nuxt 2 compatibility has been removed from @nuxt/kit. This will particularly affect module authors.

Some legacy utilities and deprecated features have been cleaned up.

The new TypeScript setup might surface some type issues that were hidden before.

A few modules might need further updates for full Nuxt 4 compatibility.