[Feature Request] Allow IDEs to support IntelliSense on virtual components

[MatthewAry]

Problem to solve

VSCode and Webstorm currently have no way to knowing when a user creates a virtual component in Vuetify. See https://vuetifyjs.com/en/features/aliasing and https://discord.com/channels/340160225338195969/1166761642026086420 for details.

Adding support for this will greatly improve the DX and accessibility of the virtual component feature.

Proposed solution

I'm not really sure what the solution here should be aside from creating some kind of code generator that will create some kind of file that will inform volar or typescript that would let it know about the existence of the components. I did some research into what the anu project is doing and I don't think their implementation is any better at figuring this out... I tried it its only a little bit different from what Vuetify does for component registrations.

[mtdvlpr]

This would be great!

[MatthewAry]

See this: vuejs/language-tools#705
Previously, I was doing something like this:

declare module '@vue/runtime-core' {
  export interface GlobalComponents {
    VPageCard: typeof import('vuetify/components')['VCard']
  }
}

export {}

And it wouldn't be picked up correctly by Volar. Per the discussion in the issue linked above, I changed my declaration to:

declare module '@vue/runtime-dom' {
  export interface GlobalComponents {
    VPageCard: typeof import('vuetify/components')['VCard']
  }
}

export { }

Which allowed Volar to resolve the component definition and IntelliSense is now working on components declared in template blocks. HOWEVER! Vuetify's component type definitions are a little messy and the IDE is picking up suggestions of questionable value. It's good to have props, events, and slots defined in components, but there seems to be other stuff in Vuetify's component type definitions.

What is $children or :$children supposed to be?

There is a separate issue #16680 that discusses Vuetify's component types in more detail. Hopefully a resolution to this other issue will lead to better IntelliSense suggestions.

I would say, for the most part, this issue is resolved for me now that I have found this solution. However, it might be good for the Vuetify team to put together some kind of Vite code generator plugin that will autogenerate a d.ts file for all of the virtualized/aliased components that get created through Vuetify.