language support (nav, completion, ...) missing when importing vue components from a lib in IntelliJ
I'm having problems with the normal framework support like navigation into the component, code completion, ...
We're using vuejs 2.x and everything is fine as long as the components are within the same module. But we moved some into a library that is pulled by normal package.json means (npm installs it under node_modules). So far so good. Using components is working too, just imported, specified in the components field and it works. But the support in IntelliJ for the lib components is gone, no navigation into, no code completion...
How is the vuejs plugin resolving the components? Do we have to configure or help IntelliJ somehow special to support it in resolvong the sources? We have a second (older) lib where it all that is working, the export of components and an install function is a difference between the libs but i couldn't reproduce that to work with the new lib. :(
Please sign in to leave a comment.
To improve code completion for different Vue.js component libraries, we are using a special format of metadata, called
web-types. web-types describe the library's components and their directives. If you're maintaining your own Vue.js component library, you can add description of the components in theweb-typesformat to your module. To help the IDE to locate this file, a link to it should be added to the"web-types"field in library package.json.Elena Pogorelova i will try this, seems to be a good way similar to SQL or Velocity when hinting IntelliJ to the right spots of source code. But it still would be interesting to know more about the resolving process to vue components because for the one older lib it worked but not the newer lib. I couldn't find the relevant difference yet... :(
Elena Pogorelova: this is the starting point:
- working (older lib 1):
-- exporting components with Vue.component(key, Components[key]);
-- using as plugin with Vue.use()
- not working (newer lib2):
-- exporting just the components using export { Component1, Component2, ...};
-- importing in a template:
import { Component1 } from "@xyz/xyz-components";
...
components: { Component1, ... },
using vue 2.6*
I can't get this to work properly for lib2, generating the web-types.json worked using the generator. I tried to pack and install the archive locally but the integration isn't nearly as perfect as with our other (working) lib without the web-types... Completion seems to work using the web-types but only if the component import is removed in the vue template. But in this case the component doesn't render and still isn't navigable to the source. :(
web-types does only a small part of the resolving process in the IDE but by far not enough to be happy working with it and when the serve process runs with all components it doesn't provide much integration anymore. When using the plugin structure it seems to work very well but web-types is completely useless in this scenario. Can't see any advantage for the vue integration in my current setup. The docs don't help me any further.
Elena Pogorelova: unfortunately i'm really no frontend specialist but is it possible to implement some parser for the .js.map files (webpack?) where all .vue component files are listed to have more info about the lib's vue components? When i look into node_modules i can see the .vue source files too, why can't IntelliJ/Vue plugin find them?
>Completion seems to work using the web-types but only if the component import is removed in the vue template
the issue is tracked at https://youtrack.jetbrains.com/issue/WEB-51028
> when the serve process runs with all components it doesn't provide much integration anymore
not sure I follow you... Please could you elaborate on this?
>is it possible to implement some parser for the .js.map files (webpack?) where all .vue component files are listed to have more info about the lib's vue components? When i look into node_modules i can see the .vue source files too, why can't IntelliJ/Vue plugin find them?
we have a feature request for recognizing components defined with
.d.ts, https://youtrack.jetbrains.com/issue/WEB-50453; unfortunately there seems to be no standard of doing this, so each library has them defined in its own wayAs we're not using typescript i'm not sure if the feature request WEB-50453 would help. I'm going the way of Vue.component() + Vue.use() as this works - at least the issue WEB-51028 shows that this/our way is working for others too.
>As we're not using typescript i'm not sure if the feature request WEB-50453 would help.
this issue is not about Typescript, it's about a way to recognize Vue library components defined with
.d.tsfiles. Not sure what your library distribution looks like, could you share it?I can't share the library, as i said before:
-- components exported just using export { Component1, Component2, ...};
-- importing in a template (.vue file):
import { Component1 } from "@xyz/xyz-components";
...
components: { Component1, ... },
again, when removing the import and the components field the vue plugin can resolve the components and navigate to the source withoud the web-types. When trying web-types the code completion starts to work (from the web-types.json) but without the import the template won't work.
https://youtrack.jetbrains.com/issue/WEB-50164, https://youtrack.jetbrains.com/issue/WEB-54803 and https://youtrack.jetbrains.com/issue/WEB-51028 seem related to the problem of IntelliJ not finding the components of the library. As i read more and more the explicit imports of the components vs. the global Vue.use() helps with tree shaking. But if the integration in IntelliJ doesn't work for this we are forced to use the global import for better development support in the IDE. So it's memory/performance issues + good IDE support vs. small footprint + no IDE support at all... :|