JavaScript: Major release Nuxt.js 4.0 introduces new directory structure
The new major release includes improved project organization through the app directory structure and enhanced TypeScript support.
(Image: Trismegist san/Shutterstock.com)
The open-source web framework Nuxt.js has reached its fourth major release, which is designed with stability in mind and includes breaking changes to improve the developer experience. Version 4.0 introduces a new project organization structure, updates data fetching, improves support for the TypeScript programming language, and speeds up the command-line interface (CLI), among other things.
Nuxt.js is a framework for developing graphical user interfaces for web applications. It is based on the JavaScript framework Vue.js and leverages its reactive, component-based architecture. Nuxt.js also uses the Vite bundler and the Nitro server engine.
(Image:Â Alexander Supertramp/Shutterstock.com)
Nine out of ten web applications have security vulnerabilities – It's high time for web developers to take action. The first enterJS Web Security Day on October 9, 2025, will focus on automated security checks, the use of passkeys, and protection against AI-based attacks.
Clean project structure with app/directory
Nuxt.js 4.0 introduces the new app/ directory, which is designed to ensure cleaner project organization. By default, application code is now located under app/. This should help keep the code separate from node_modules/ and .git/, thereby speeding up file watchers, especially on Windows and Linux. In addition, the new structure should make it easier for development environments to recognize whether work is currently being done on the client or server code.
my-nuxt-app/
├─ app/
│ ├─ assets/
│ ├─ components/
│ ├─ composables/
│ ├─ layouts/
│ ├─ middleware/
│ ├─ pages/
│ ├─ plugins/
│ ├─ utils/
│ ├─ app.vue
│ ├─ app.config.ts
│ └─ error.vue
├─ content/
├─ public/
├─ shared/
├─ server/
└─ nuxt.config.tsDevelopers who do not want to migrate to the new structure do not have to do so, as Nuxt.js recognizes existing structures and retains them.
Improved TypeScript support and CLI acceleration
In the new release, Nuxt.js creates separate TypeScript projects for app code, server code, the shared/ folder, and builder code. This should lead to improved autocompletion, more accurate type inference, and less confusing error messages when working in different contexts.
Videos by heise
The Nuxt.js team has also accelerated the CLI (@nuxt/cli). Among the new changes are significantly faster cold starts and the Node.js compile cache, reusing the V8 compile cache.
Upgrading to the new major version
As the Nuxt.js team emphasizes, although each major version brings backward-incompatible changes (breaking changes), the upgrade process to version 4.0 should be as smooth as possible. Most of these changes have been available for testing for over a year via a compatibility flag. Most can be reverted to the old behavior via a configuration option.
The development team provides information about all the new features in the fourth major version, which was released after a year of real-world testing, on the Nuxt.js blog.
(mai)
