unplugin-vue-components: Intellisense does not work for auto-imported components

Thank you @Sight-wcg for the pointers!

I’ll summarize the answers in English here for others who might be facing the same issue:

The problem occurs in the automatically generated components.d.ts file, where the module with the auto-imported component types is declared as @vue/runtime-core. Intellisense is lost because pnpm can only access a project’s top-level dependencies, and @vue/runtime-core is a dependency nested inside the vue module (that is, not a top dependency). So, the declaration fails.

There are several ways to solve this issue:

1. 🌟 (preferred) Create or edit a .npmrc file in your directory’s root, and add this line in it: public-hoist-pattern[]=@vue/runtime-core
2. (not recommended) Create or edit a .npmrc file in your directory’s root, and add this line in it: shamefully-hoist=true (Doing this will make all nested dependencies available as top-level dependencies)
3. (not recommended) Run pnpm add @vue/runtime-core -D to add the nested module as a top-level dependency. (You must ensure the version of @vue/runtime-core matches the version of Vue installed in your project.)
4. (not recommended) Use version 0.18.5 of unplugin-vue-components instead of the latest version. (Works because up to this version unplugin-vue-components declared the module in components.d.ts as ‘vue’. The downside is that you’ll miss out on the latest updates and improvements to the plugin.)
5. (not recommended) Manually update the module declaration name in components.d.ts to declare module 'vue' instead of declare module '@vue/runtime-core' (Inconvenient because you’ll have to update the module name whenever unplugin-vue-components automatically generates a new components.d.ts file and overwrites your changes.)

If you chose option 1 or 2 and created the .npmrc file, run pnpm i afterwards to update your node_modules with the latest config. Then, reload your workspace. Intellisense for auto-imported components should be working again.

Maybe solution 1 should be added to the plugin docs?

PS: Credits to wangyu-personal and loosheng for their answers in the related threads.

https://github.com/antfu/unplugin-vue-components/issues/389 https://github.com/antfu/unplugin-vue-components/issues/406

@mareszhar I watched your repository, you used typescript. add "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue", "components.d.ts"], on tsconfig.json. Personally I think u missed components.d.ts

@mareszhar should the Intellisense of that repo look like this?

If I click it, it opens components.d.ts and not the component itself

@ThaDaVos Correct, that’s the same intellisense preview I see of the HelloWorld component. I agree, it’s inconvenient that doing ctrl/cmnd + click to the component doesn’t take you to the component’s file, but rather to its type definition in components.d.ts, but at least you can see its relative path there if you need to find it among many other components. Hopefully in the future, there’s better navigation support for auto-imported components.

I had trouble with this too. I tried options 1, 3, 4, and 5 from this comment, no luck. I specifically had trouble with getting type-checking on inline functions within a v-on property. So something like this

<MyComponent @some-event="
    (someParam) => someFunction(someParam)
"></MyComponent>

would give me Parameter 'someParam' implicitly has an 'any' type.ts(7006) even though I have this param defined within the component correctly.

I can verify that the auto-import is the problem because if I simply import the component MyComponent (don’t depend on auto-importing), type checking kicks in correctly and someParam would be defined to whatever type I have it set as within MyComponent.

Please let me know if there is a fix for this issue or if I have something messed up on my end.