How does Nuxt 4’s new app directory structure enhance code organization and modularity?

Nuxt 4 introduces a new app directory that centralizes application code, clearly separating it from server-side logic and configuration files.

This enhanced structure improves code organization and modularity by collocating related files (components, pages, layouts, composables) under one directory. It optimizes developer experience with better type safety, faster development server startup, and more intuitive project navigation, especially in large projects.

Code

app/
 ├─ layouts/
 │   └─ default.vue
 ├─ pages/
 │   ├─ index.vue
 │   └─ dashboard.vue
 ├─ components/
 │   └─ NavBar.vue
 ├─ middleware/
 │   └─ auth.ts
 └─ plugins/
     └─ api.ts