3

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?

LazyOne
  • 158,824
  • 45
  • 388
  • 391
Josh
  • 294
  • 1
  • 2
  • 11

1 Answers1

2

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.

lena
  • 90,154
  • 11
  • 145
  • 150
  • Thanks for your answer, I didn't know that. So I've generated a `web-types.json` file using `vue-docgen-web-types` npm package and linked the file in my `package.json` as described in the documentation (`"web-types": "./web-types.json"`) and rebuild my library. But unfortunatly, the code completion just works locally with `npm link`. When I use the library in another project, the code completion still doesn't work... anything else I have to do with this? – Josh Jun 03 '22 at 06:57
  • no idea:( I'd suggest creating support ticket, providing a test project for investigstions – lena Jun 03 '22 at 08:38
  • I just managed to do it by accident. I also had to put the file into the `files` array in `package.json` like this: `"files": ["dist", "web-types.json"]`, so it gets included in the npm package. – Josh Jun 07 '22 at 15:00