Nuxt 4 folder structure and best use of layers

[grandant]

This discussion is a follow-up to the now-closed issue: #17.

While investigating TS/linting issues, I ended up refactoring the project structure and digging deeper into how Nuxt 4 handles app/, layers, and srcDir. The short version is that this doesn’t appear to be a bug, but rather a consequence of current Nuxt 4 constraints.

In Nuxt 4, only the app surface can be relocated via srcDir / srcApp. Layers must remain at the project root and cannot be moved. This worked more flexibly in Nuxt 3, but in Nuxt 4 it leads to TypeScript issues even when runtime behavior seems fine. This is discussed in more detail here:
nuxt/nuxt#32965

The root app/ currently acts as the final, unifying layer. Anything defined there always takes precedence over layer pages and config. As outlined in #17, this also means that app/pages/index.vue cannot be overridden.

There is very helpful video by Alex Richter, which helped me understand what can and cannot be moved or overridden in Nuxt 4:
https://www.youtube.com/watch?v=zDzO6-uq80s

At this point, the structure works as designed, but I’m opening this discussion to get feedback on best practices — specifically whether root app/ should be treated strictly as a final override layer, or if there’s a cleaner pattern for building overridable base pages without running into precedence issues.