How to automatically import custom shared directories
I created a custom directory in shared, and I want it to be imported automatically. According to the documentation, I added the directory to
importes.dirs and nitro.imports.dirs, but it didn't import correctly. I would like to ask if there is a problem with my method, as follows:
custom directory：
shared/schemas
5 Replies
Hi @Eev. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Your approach is logical, but according to the official Nuxt documentation, only the shared/utils/ and shared/types/ directories are auto-imported by default (when using future.compatibilityVersion: 4). Custom directories inside shared/ (such as shared/schemas) are not auto-imported automatically, even if you add them to imports.dirs and nitro.imports.dirs. This is explicitly mentioned:
- Auto-imports are only supported for shared/utils and shared/types (and their subdirectories if configured). - For other custom directories (like shared/schemas), you must use manual imports via the #shared alias. - Your configuration will not enable auto-imports for shared/schemas; this is a current limitation by design. What you should do:
Manually import from #shared/schemas/your-file where needed. If you need auto-imports for a custom directory, you would need to use a Nuxt module and the addImportsDir utility, but this is not the standard workflow for the shared/ directory and is not covered in the official documentation for this use case. For more details, see the Nuxt shared directory documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
Only files in the shared/utils/ and shared/types/ directories will be auto-imported. Files nested within subdirectories of these directories will not be auto-imported unless you add these directories to imports.dirs and nitro.imports.dirs.>
Any other files you create in the shared/ folder must be manually imported using the #shared alias (automatically configured by Nuxt)However, the documentation also clarifies that even with imports.dirs and nitro.imports.dirs, only subdirectories of shared/utils and shared/types can be added for auto-imports. Arbitrary custom directories like shared/schemas are not supported for auto-imports in the same way. Summary:
Nuxt shared directory docs
- Auto-imports are only supported for shared/utils and shared/types (and their subdirectories if configured). - For other custom directories (like shared/schemas), you must use manual imports via the #shared alias. - Your configuration will not enable auto-imports for shared/schemas; this is a current limitation by design. What you should do:
Manually import from #shared/schemas/your-file where needed. If you need auto-imports for a custom directory, you would need to use a Nuxt module and the addImportsDir utility, but this is not the standard workflow for the shared/ directory and is not covered in the official documentation for this use case. For more details, see the Nuxt shared directory documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@969507618894803024> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
@kapa.ai Is there a plan to automatically import any custom shared directory?Also I would like to know what is the difference between using a #shared alias and importing from a directory
Let me check the knowledge base for you again. One moment! :books:
----------------------
Currently, there is no explicit information in the provided knowledge sources about plans to support auto-imports for arbitrary custom directories inside the shared/ directory (such as shared/schemas). The auto-import feature is officially limited to shared/utils and shared/types, and their subdirectories if configured via imports.dirs and nitro.imports.dirs. For any other custom directories, manual imports using the #shared alias are required. The documentation and related discussions do not mention any roadmap or proposal to extend auto-imports to all custom shared directories at this time Nuxt shared directory docs docs: add auto import info about shared utils.
Difference between using the #shared alias and importing from a directory:
- Using the #shared alias:
This is a Nuxt-provided alias that allows you to import files from the shared/ directory regardless of where you are in your project (app or server). For example: This ensures consistent and clear imports, and works for any file in shared/, not just those in auto-imported directories. - Importing from a directory (auto-import):
When a directory is auto-imported (like shared/utils or shared/types), you can use its exports directly in your code without writing an explicit import statement. For example, if you have a named export in shared/utils/capitalize.ts, you can use capitalize() anywhere in your app or server code without importing it manually, provided auto-imports are enabled and compatibilityVersion: 4 is set. In summary:
- #shared alias = manual, explicit import from any file in shared/ - Auto-import = no import statement needed, but only works for shared/utils and shared/types (with compatibilityVersion: 4) There is no mention in the knowledge sources of plans to expand auto-imports to arbitrary custom shared directories. If you need this feature, you may want to follow Nuxt's GitHub discussions for future updates Nuxt shared directory docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
This is a Nuxt-provided alias that allows you to import files from the shared/ directory regardless of where you are in your project (app or server). For example: This ensures consistent and clear imports, and works for any file in shared/, not just those in auto-imported directories. - Importing from a directory (auto-import):
When a directory is auto-imported (like shared/utils or shared/types), you can use its exports directly in your code without writing an explicit import statement. For example, if you have a named export in shared/utils/capitalize.ts, you can use capitalize() anywhere in your app or server code without importing it manually, provided auto-imports are enabled and compatibilityVersion: 4 is set. In summary:
- #shared alias = manual, explicit import from any file in shared/ - Auto-import = no import statement needed, but only works for shared/utils and shared/types (with compatibilityVersion: 4) There is no mention in the knowledge sources of plans to expand auto-imports to arbitrary custom shared directories. If you need this feature, you may want to follow Nuxt's GitHub discussions for future updates Nuxt shared directory docs. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
<@969507618894803024> Kapa.ai is still learning and improving, please let me know how I did by reacting below.