PHPStorm/WebStorm does not add import statements to vue component from library

I am working on a project where I am using Vue and Bootstrap-Vue.

As per Bootstrap-Vue's documentation (https://bootstrap-vue.js.org/docs/#tree-shaking-with-module-bundlers) when using a bundler one could import the used components locally to a custom component to reduce bundle size.

The problem is that PHPStorm (or WebStorm, tested in both) does not add the import statements for the Bootstrap-Vue components when auto importing from code completion. I searched a lot in the forums and could not find a solution.

My guess is that PhpStorm assumes BootstrapVue's components are available globally and don't mind to add the import statements when auto importing from code completion.

Right now I am importing all the BootstrapVue's components manually. I searched the forums and issue tracker and could not find a related solution.

For completeness, below is a snippet illustrating my request:

 

<template>
<BCard>
<IconButton />
</BCard>
</template>

<script>
// the import stament below was added manually by me
import {BCard} from 'bootstrap-vue';

// the import statement below was added automatically by the IDE
import IconButton from '@/js/components/IconButton';

export default {
name: 'MyApp',

components: {
BCard, // <-- added manually by me
IconButton, // <-- added automatically by IDE
},
};
</script>
3 comments
Comment actions Permalink

this is likely a result of fixing https://youtrack.jetbrains.com/issue/WEB-28512

Do you have bootstrap components registered globally via Vue.component(comp) or Vue.use(plugin)?

Sample project that shows up the issue would he helpful

0
Comment actions Permalink

There is no sense to register every component globally (webpack will bundle entire libraries, not just used components).

PHPStorm should add those references if component is not registered globally. Currently it registers only if component is inside same node package.

0
Comment actions Permalink

>PHPStorm should add those references if component is not registered globally. 

It does add them, as far as I can check

 

>Currently it registers only if component is inside same node package.

please share a sample project the issue can be reproduced with

0

Please sign in to leave a comment.