Nuxt•3w ago

srcDir: "src/"

I added srcDir: "src/", to my nuxt config, but now auto imports are broke

2 Replies

Hi @ethan!. 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 information provided in the knowledge sources, it appears that changing the srcDir in your Nuxt configuration can indeed affect auto-imports. Let's address this issue: 1. First, it's important to note that when you set srcDir: "src/", Nuxt will look for your application files in the src/ directory instead of the root directory. This includes directories like components/, composables/, and pages/ Nuxt Configuration (https://nuxt.com/docs/api/nuxt-config#srcdir). 2. Auto-imports in Nuxt are typically set up to scan specific directories, including components/, composables/, and utils/ Directory-based Auto-imports (https://nuxt.com/docs/guide/concepts/auto-imports#directory-based-auto-imports). 3. To fix the auto-imports, you need to ensure that these directories are present inside your src/ folder. The structure should look like this:

-| src/
---| components/
---| composables/
---| layouts/
---| middleware/
---| pages/
---| plugins/
---| public/
---| store/
---| app.config.ts
---| app.vue
---| error.vue

-| src/
---| components/
---| composables/
---| layouts/
---| middleware/
---| pages/
---| plugins/
---| public/
---| store/
---| app.config.ts
---| app.vue
---| error.vue

4. If you've moved your directories but auto-imports are still not working, you might need to configure the imports option in your nuxt.config.ts file. You can specify additional directories to scan for auto-imports Nuxt Configuration - imports (https://nuxt.com/docs/api/nuxt-config#imports):

export default defineNuxtConfig({
  srcDir: 'src/',
  imports: {
    dirs: [
      'src/composables',
      'src/utils'
      // ... any other directories you want to auto-import from
    ]
  }
})

export default defineNuxtConfig({
  srcDir: 'src/',
  imports: {
    dirs: [
      'src/composables',
      'src/utils'
      // ... any other directories you want to auto-import from
    ]
  }
})

5. If you're using custom directories for components, you might also need to update the components configuration Custom Directories (https://nuxt.com/docs/guide/directory-structure/components#custom-directories):

export default defineNuxtConfig({
  srcDir: 'src/',
  components: [
    '~/components',
    // ... any other component directories
  ]
})

export default defineNuxtConfig({
  srcDir: 'src/',
  components: [
    '~/components',
    // ... any other component directories
  ]
})

Remember to restart your Nuxt development server after making these changes to ensure they take effect. If you've followed these steps and are still experiencing issues with auto-imports, it might be worth checking if there are any specific error messages or if there are other configurations in your project that might be interfering with the auto-import functionality. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

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

Gaming

Programming

srcDir: "src/"