Nuxt•5d ago

Nuxt Auto-Imports and TypeScript Server interactions with subfolders help

Something I am trying to understand about auto-imports and Nuxt's file structure: I have a class with functions inside app/utils/Services/storage.service.ts, and I don't have Nuxt auto-importing sub-folders in app/utils/. I should just be able to manually import it with no issues, correct? I can compile my app just fine, but my TS server seems to be having issues. Example screenshot attached of behavior I am seeing

4 Replies

kapa.ai•5d ago

Hi @gregandcin. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You are correct: Nuxt only auto-imports files at the top level of the app/utils/ directory by default. Files in subfolders like app/utils/services/storage.service.ts are not auto-imported, so you need to import them manually in your code. This is expected behavior and should not cause issues with your app's compilation or runtime, as long as you use standard ES module imports. However, regarding your TypeScript server issues: the knowledge sources do not provide explicit details about TS server behavior with manual imports from subfolders. Nuxt's documentation does mention that only top-level files in utils/ are auto-imported, and for subfolders, you must either re-export them in a top-level file (like utils/index.ts) or configure the imports.dirs option in your nuxt.config.ts to include subdirectories if you want auto-imports for them. Otherwise, manual imports are the way to go and should work as expected for both JavaScript and TypeScript files, provided your project and TS config are set up correctly Docs: app/utils Stack Overflow: arbitrary code. If your TypeScript server is having trouble resolving these manual imports, it may be due to a misconfiguration in your tsconfig.json or an issue with how paths are resolved in your project, but the Nuxt documentation does not cover this scenario in detail. Summary:
- Manual imports from subfolders in app/utils/ are expected and supported. - Auto-imports only work for top-level files unless you re-export or configure imports.dirs. - TypeScript server issues are not covered in the provided knowledge sources, but should not occur if your project is configured correctly. If you want auto-imports for subfolders, you can either: - Re-export from a top-level file:

  // app/utils/index.ts
  export * from './services/storage.service'

  // app/utils/index.ts
  export * from './services/storage.service'

- Or, configure your nuxt.config.ts:

  export default defineNuxtConfig({
    imports: {
      dirs: ['~/utils', '~/utils/**']
    }
  })

  export default defineNuxtConfig({
    imports: {
      dirs: ['~/utils', '~/utils/**']
    }
  })

Docs: app/utils ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

Cake•4d ago

where is this?

gregandcinOP•4d ago

This was in a composable in app/composables

Gaming

Programming

Nuxt Auto-Imports and TypeScript Server interactions with subfolders help

Did you find this page helpful?