Nuxt•4mo ago

Directory Structure

@kapa.ai I want my project directory structure to be like this: ``` .nuxt node_modules src/ app/ assets components composables layouts middleware pages plugins utils app.vue content public serve shared nuxt.config.ts package.json

2 Replies

kapa.ai•4mo ago

Hi @Bubble Butt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To achieve your desired directory structure with a top-level src/ folder containing app/, content/, public/, serve/, and shared/, you will need to configure Nuxt to use a custom srcDir. By default, Nuxt 4 expects the app/ directory at the project root, but you can override this by setting srcDir in your nuxt.config.ts:

export default defineNuxtConfig({
  srcDir: 'src/app'
})

export default defineNuxtConfig({
  srcDir: 'src/app'
})

However, note that with this configuration, directories like content/, public/, server/, and shared/ are, by default, expected at the project root (not inside src/). If you want them inside src/, you must also update the corresponding directory options in your config:

export default defineNuxtConfig({
  srcDir: 'src/app',
  dir: {
    public: 'src/public',
    shared: 'src/shared',
    // You can add other custom directories as needed
  },
  content: {
    dir: 'src/content'
  },
  serverDir: 'src/serve'
})

export default defineNuxtConfig({
  srcDir: 'src/app',
  dir: {
    public: 'src/public',
    shared: 'src/shared',
    // You can add other custom directories as needed
  },
  content: {
    dir: 'src/content'
  },
  serverDir: 'src/serve'
})

Key points: - The new default Nuxt 4 structure puts app/ at the root, but you can move it by setting srcDir. - By default, public/, server/, shared/, and content/ are resolved from the project root, but you can customize their locations using the dir and serverDir options. - The ~ alias will point to your src/app directory if you set srcDir: 'src/app' New Directory Structure. - Make sure to update any third-party configuration files (like Tailwind or ESLint) to match your new structure if needed. References: - New Directory Structure - Nuxt Configuration: dir If you need to further customize or add more directories, refer to the Nuxt configuration documentation for all available options. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

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

Gaming

Programming

Directory Structure

Did you find this page helpful?