PhpStorm: Missing code completion on custom Vue 3 component library

Question

I have built a Vue Component Library for my projects.

After I have integrated the library in my main.js with app.use(ComponentLibrary), and use the individual components in my views, they do not have code-completion or tag & attribute suggestions in my IDE (PhpStorm), so they are not recognised.

They still work, but it would be very helpful if the IDE also recognised them.

Does anyone have an idea how I can solve this?

Answer 1

The IDE doesn't understand the way components are exposed in library files, thus the issue.

To improve code completion for different Vue.js component libraries, the IDE is using a special format of metadata, called web-types. web-types describe the library's components and their directives. The library developers have to provide descriptions of library components in the web-types format and include it in package distribution to get all props correctly completed and resolved.