Problems with component typing in Nuxt 4
I have installed the latest version of Nuxt 4 with default settings and am trying to ensure that the autocomplete tells me the props of the components without importing them (see the example in the screenshot).
Everything starts to work if I create a file of types in the app folder that essentially repeats the contents of the file from
.nuxt/types/components.d.ts , without it I get a result like - '(property) 'Icon': any'
What am I missing, how can this be implemented?
3 Replies
Hi @se.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
You're encountering a known issue that affected Nuxt 4's auto-imported component typings, where IDEs like VSCode or WebStorm would not provide proper autocomplete or type inference for component props unless you manually duplicated type declarations. This was due to problems in how Nuxt generated and referenced the
You no longer need to manually duplicate component type declarations. Update Nuxt to the latest version, and the IDE should provide prop autocompletion and type checking for auto-imported components out of the box, thanks to recent fixes in the framework Incorrect relative imports in
.nuxt/types/components.d.ts file—specifically, incorrect relative import paths and missing type exposure in the IDE context.
What was happening:
- The generated .nuxt/types/components.d.ts sometimes had incorrect import paths, causing IDEs to lose track of the actual component types. This led to components being typed as any, so you wouldn't get prop autocompletion or type checking.
- This issue was reported and discussed in detail, and a fix was merged to correct the import paths and ensure proper type exposure for auto-imported components. The fix ensures that IDEs can now resolve component types correctly, and you should not need to manually duplicate type declarations in your app folder anymore. The fix is included in a hotfix after Nuxt 4.1.0, so make sure you are using the latest Nuxt version that includes this fix Incorrect relative imports in .nuxt/types/components.d.ts cause broken IDE navigation and missing autocomplete.
What you should do:
1. Update Nuxt: Make sure you are on the latest Nuxt 4.x version, as this issue has been resolved in a recent hotfix.
2. Restart your IDE: After updating, restart your IDE and possibly its TypeScript server to ensure it picks up the new type declarations.
3. No manual duplication needed: You should not need to manually copy or create type files for components in your app folder. The fix ensures .nuxt/types/components.d.ts is correctly referenced and used by your IDE.
If you still have issues after updating:
- Double-check that your project’s tsconfig.json extends from the Nuxt-generated config (usually .nuxt/tsconfig.app.json or .nuxt/tsconfig.json).
- Run nuxt dev or nuxt prepare to regenerate type files.
- If you use a custom setup, ensure you haven’t overridden important TypeScript options that would prevent Nuxt’s type generation from being recognized by your IDE Auto-generated Types.
Summary:You no longer need to manually duplicate component type declarations. Update Nuxt to the latest version, and the IDE should provide prop autocompletion and type checking for auto-imported components out of the box, thanks to recent fixes in the framework Incorrect relative imports in
.nuxt/types/components.d.ts cause broken IDE navigation and missing autocomplete.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@166121988996202497> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
finally, it worked, I spent the whole day searching for a solution, it's good that I came here for help 🥲