In Nuxt version 4, the most significant change to our projects will be the file structure. Nuxt version 4 introduces a new app directory. This directory will now store most of the files that we once stored in the root of our project. Folders such as components will go here, pages, composables, layouts, middleware, plugins, and utils.
ts, which is useful for application config. All of your other files and folders will remain in the root directory. Folders like your layers folder, modules, public directory, and of course the server directory. ts will also stay in the root.
So what is the purpose of these changes? Are they purely stylistic? Did the Nuxt Core team say, hey, I think these folders and files would look better in an app directory? The answer is no.
There are some real practical reasons for this change. Number one is that it improves performance. Why? git and node modules folders being scanned and included by file system watchers, which could significantly delay startup in non-Mac OSes.
Number two is an improvement for IDE type safety. The server directory and the rest of your application are running in two entirely different contexts with different global imports available. And making sure the server directory isn't inside the same folder as the rest of your application is a big first step to ensuring you get good autocompletes in your IDE. So what if you want to continue with the old file structure?
That's actually super easy. You just don't do anything. Nuxt can auto-detect the folder structure and serve your app accordingly.