New composable undetected
Hello there, i've been trying to fix my problem for hours and tried many things i will try to list here in order for someone to help me if possible ^^
Objective : Create a new composable
backoffice/composables/api/useShopSubscriptionApi i came on a project where there is other composables in the same directory and i tried to fit to the syntax. But first problem, in my recently created composable, i could not use automatically interfaces and other composables just like on useShopSubscriptionApi for example is using
without any import. So i had to make the imports on the top of the file only on my new file... weird
Then, when trying to use it into a .vue component via : const { data, status, error } = await useShopSubscriptionApi().getShopSubscriptions(, it's not recognized, but i didnt import it, okay. But no other vue file import any other composable, its automatic everywhere, and since i try to autocomplete import useShopSubscriptionApi from '../../composables/api/useS.... its not found.
So i am pretty sure i have to run a command, index them somewhere or i dont know what i did miss.
I tried
- Restarting my IDE
- clearing node modules and .nuxt and reinstalling everything
- changing classic export default at the end of the file to export default (): ShopSubscriptionApiType =>
- I double checked for typos
- i checked nuxt.config.ts
- i dont have any .d.ts other files
and other things i've forgotten.
Pretty sure its not that hard but i require your lights š„²3 Replies
Hi @redsnake. 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, I can offer some insights into your issue with creating a new composable in Nuxt. Let's go through the potential problems and solutions:
1. Auto-importing of composables:
Nuxt automatically scans and imports composables from the
composables/ directory at the root level. However, your new composable is located in backoffice/composables/api/useShopSubscriptionApi. This nested structure might be the reason why it's not being auto-imported.
According to the Nuxt documentation on composables (https://nuxt.com/docs/guide/directory-structure/composables#how-files-are-scanned), Nuxt only scans files at the top level of the composables/ directory by default. To fix this, you have two options:
a. Re-export your composable:
You can re-export your composable from the top-level composables/index.ts file:
b. Configure the scanner to include nested directories:
Alternatively, you can modify your nuxt.config.ts file to scan nested directories:
2. Auto-importing of interfaces and other composables:
The fact that you need to manually import interfaces and other composables in your new file, while existing files don't require this, suggests that there might be a global type declaration file or some other configuration that's not being applied to your new file. Unfortunately, the provided knowledge sources don't give specific information about this issue.
3. Generating type declarations:
Nuxt generates type declarations for auto-imports when you run nuxi dev or nuxi build. As mentioned in the Nuxt TypeScript documentation (https://nuxt.com/docs/guide/concepts/typescript#auto-generated-types), these types are generated in the .nuxt/nuxt.d.ts file. Make sure you've run one of these commands after creating your new composable.
4. Explicit imports:
If auto-imports are still not working, you can try using explicit imports from the #imports alias, as mentioned in the Nuxt documentation on explicit imports (https://nuxt.com/docs/bridge/nuxt3-compatible-api#explicit-imports):
5. Checking auto-import configuration:
Double-check your nuxt.config.ts file to ensure that auto-imports are not disabled. As per the Nuxt documentation on disabling auto-imports (https://nuxt.com/docs/bridge/nuxt3-compatible-api#disabling-auto-imports), make sure you don't have autoImport: false in your imports configuration.
If none of these solutions work, you might need to investigate further by checking the generated .nuxt/types/imports.d.ts file to see if your composable is being recognized by Nuxt's auto-import system.
Remember to restart your development server after making these changes to ensure they take effect.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@190207520130859008> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
1 - i don't have composables/index.ts
my nuxt.config.ts is
2 - yes that's my point, i'm certainly missing smth
3 - i tried nuxi dev and build
4 - i dont want explicit imports, i want to fit to the existing
5 - alr done in 1