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>
1 comment
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

Please sign in to leave a comment.