Nuxt•6mo ago

app dir nuxt 4

Hello there, i got to go on nuxt 4 for my next task. Well i got some issues with the app directory : instead of displaying "hello world", it display the nuxt welcome page, i guess my app directory did not get detected by nuxt. here's my config :

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  srcDir: 'src/',
  appDir: 'src/app',
  serverDir: 'src/server',
})

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  srcDir: 'src/',
  appDir: 'src/app',
  serverDir: 'src/server',
})

My folder structure is in the image below.

5 Replies

kapa.ai•6mo ago

Hi @() => "CodingBill";. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, in Nuxt 4 the new default directory structure expects your application source code to be inside an app/ directory at the project root, not inside src/app/. By default, Nuxt sets srcDir to app/ (i.e., <rootDir>/app), and most things are resolved from there. If you set srcDir to src/, then your app directory should be src/assets, src/components, etc., and your app.vue should be at src/app.vue, not src/app/app.vue. Your current config:

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  srcDir: 'src/',
  appDir: 'src/app',
  serverDir: 'src/server',
})

export default defineNuxtConfig({
  future: {
    compatibilityVersion: 4,
  },
  srcDir: 'src/',
  appDir: 'src/app',
  serverDir: 'src/server',
})

is not correct, because appDir is not a valid Nuxt config option. The correct option is dir.app, and it should be relative to srcDir (or rootDir, depending on your structure). How to fix: - If you want to use the new Nuxt 4 structure, your folder tree should look like this:

  app/
    assets/
    components/
    pages/
    app.vue
    ...
  server/
  nuxt.config.ts

  app/
    assets/
    components/
    pages/
    app.vue
    ...
  server/
  nuxt.config.ts

And your config should be:

  export default defineNuxtConfig({
    future: {
      compatibilityVersion: 4,
    }
    // No need to set srcDir or dir.app if you use the default structure
  })

  export default defineNuxtConfig({
    future: {
      compatibilityVersion: 4,
    }
    // No need to set srcDir or dir.app if you use the default structure
  })

- If you want to keep your code in src/, then your structure should be:

  src/
    assets/
    components/
    pages/
    app.vue
    ...
  server/
  nuxt.config.ts

  src/
    assets/
    components/
    pages/
    app.vue
    ...
  server/
  nuxt.config.ts

And your config should be:

  export default defineNuxtConfig({
    future: {
      compatibilityVersion: 4,
    },
    srcDir: 'src/',
    serverDir: 'server', // serverDir is now resolved from rootDir by default
    dir: {
      app: '.', // app.vue and related files are at src/app.vue, not src/app/app.vue
    }
  })

  export default defineNuxtConfig({
    future: {
      compatibilityVersion: 4,
    },
    srcDir: 'src/',
    serverDir: 'server', // serverDir is now resolved from rootDir by default
    dir: {
      app: '.', // app.vue and related files are at src/app.vue, not src/app/app.vue
    }
  })

Key points: - Do not use appDir; use dir.app if you need to customize. - app.vue should be directly inside your srcDir (e.g., src/app.vue), not nested in src/app/app.vue unless you set dir.app accordingly. - If Nuxt cannot find app.vue in the expected place, it will show the welcome page instead of your app. For more details, see the Nuxt 4 directory structure upgrade guide and the srcDir documentation. If you adjust your structure and config as above, Nuxt should detect your app directory and display your app.vue content as expected. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@180843812204183552> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

() => "CodingBill";OP•6mo ago

1 - @kapa.ai When i got this structure (with no config at all) it works :

project
-| app
-| server
-| shared

project
-| app
-| server
-| shared

2 - But when i have this structure :

project
--| src
---| app
---| server
---| shared

project
--| src
---| app
---| server
---| shared

With this config :

  serverDir: 'src/server',
  dir: {
    app: 'src/app',
    shared: 'src/shared',
  },

  serverDir: 'src/server',
  dir: {
    app: 'src/app',
    shared: 'src/shared',
  },

Only my server works...

kapa.ai•6mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Your observation matches the expected Nuxt 4 behavior regarding directory structure and configuration, but there are some important details about how Nuxt resolves directories when you customize them. 1. Default Structure (No Config) When you use the default structure:

project/
  app/
  server/
  shared/

project/
  app/
  server/
  shared/

Nuxt automatically detects and uses these directories as intended, with app/ as the source directory, server/ for Nitro, and shared/ for shared code. No extra configuration is needed, and everything works out of the box New Directory Structure. --- 2. Custom Structure Under src/ with Config When you move everything under src/:

project/
  src/
    app/
    server/
    shared/

project/
  src/
    app/
    server/
    shared/

and use this config:

export default defineNuxtConfig({
  serverDir: 'src/server',
  dir: {
    app: 'src/app',
    shared: 'src/shared',
  },
})

export default defineNuxtConfig({
  serverDir: 'src/server',
  dir: {
    app: 'src/app',
    shared: 'src/shared',
  },
})

Issue:
Only your server works, but the app does not. #### Why? - The Nuxt documentation states that dir.app and dir.shared are relative to the srcDir (which defaults to app/ in v4, or . if not set) dir option. - If you do not set srcDir, Nuxt expects app/ at the project root. By setting dir.app: 'src/app', you are telling Nuxt to look for project/app/src/app, which does not exist. - Similarly, serverDir is relative to the root by default in v4, so serverDir: 'src/server' is correct if your server code is in src/server. #### How to Fix You need to set srcDir to 'src/' so that all your custom directories are resolved relative to src/:

export default defineNuxtConfig({
  srcDir: 'src/',
  serverDir: 'server', // Now relative to srcDir, so this points to src/server
  dir: {
    app: '.',      // app.vue and related files are at src/app/
    shared: 'shared', // shared/ is at src/shared/
  },
})

export default defineNuxtConfig({
  srcDir: 'src/',
  serverDir: 'server', // Now relative to srcDir, so this points to src/server
  dir: {
    app: '.',      // app.vue and related files are at src/app/
    shared: 'shared', // shared/ is at src/shared/
  },
})

Or, if you want to keep serverDir relative to the project root:

export default defineNuxtConfig({
  srcDir: 'src/',
  serverDir: '../server', // points to project/server
  dir: {
    app: '.',      // src/app/
    shared: 'shared', // src/shared/
  },
})

export default defineNuxtConfig({
  srcDir: 'src/',
  serverDir: '../server', // points to project/server
  dir: {
    app: '.',      // src/app/
    shared: 'shared', // src/shared/
  },
})

Key Point:
When you nest your structure under src/, you must set srcDir: 'src/' and adjust dir.app and dir.shared accordingly. Otherwise, Nuxt cannot find your app directory and falls back to the welcome page srcDir docs dir docs. --- Summary:
- With everything under src/, set srcDir: 'src/' and use relative paths for dir.app and dir.shared (e.g., '.' and 'shared'). - If you do not set srcDir, Nuxt expects app/ at the project root. This should resolve your issue and allow both your app and server to work as expected. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6mo ago

<@180843812204183552> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

app dir nuxt 4

Did you find this page helpful?