Unknown html tag warning of Bootstrap-Vue.js support in WebStorm

Question

I'm using WebStorm 2017.2.4 and webpack Vue.js project. I have added bootstrap-vue.js to my project and would like to see hints for it and components support.

But instead of that I have got "Unknown html tag" warning.

BTW: bootstrap-vue works as expected when running project.

Do you have any suggestions how to make it work?

Solution 1

UPDATED on 2019/07/30

PHPShtorm(WebStorm) was updated to 2019.2 and now they added better support for vuejs libraries: https://blog.jetbrains.com/webstorm/2019/07/webstorm-2019-2/#development_with_vue I've just tested and it works.

OLD answer

I solved this issue by adding components manually. According to: https://bootstrap-vue.js.org/docs/#individual-components-and-directives I created new file, e.g. bootstrap.js then register globally components which required

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import Vue from 'vue';
import navbar from 'bootstrap-vue/es/components/navbar/navbar';
import container from 'bootstrap-vue/es/components/layout/container';
// ...

Vue.component('b-navbar', navbar);
Vue.component('b-container', container);
// ...

It work for me in phpstorm 2018.1

Solution 2

Bootstrap vue uses very dynamic way of defining components. I am using PyCharm with vuejs extension which is unable to resolve the components when registered using

import { Layout } from 'bootstrap-vue/es/components'

Vue.use(Layout)

What I use to do is make a new file bootstrap.js in components directory, and register all bootstrap components I would use like

import Vue from 'vue'

import bContainer from 'bootstrap-vue/es/components/layout/container'
import bRow from 'bootstrap-vue/es/components/layout/row'
import bCol from 'bootstrap-vue/es/components/layout/col'

Vue.component('b-container', bContainer);
Vue.component('b-col', bCol);
Vue.component('b-row', bRow);

and then import this file in main.js

import './components/bootstrap'

Just a little cleaner solution.

Solution 3

Updated: There're two ways to fix "Unknown html tag" warning: (Global and Local Registration)

1. Global Registration :

   You should have to register your component globally Vue.component(tagName, options) before creating the new Vue instance. For example:

   Vue.component('my-component', {
     // options
   })
   

   Once registered, a component can be used in an instance’s template as a custom element, <my-component></my-component>. Make sure the component is registered before you instantiate the root Vue instance. Here’s the full example:

   _HTML:

   <div id="example">
     <my-component></my-component>
   </div>
   

   _JS:

   // global register
   Vue.component('my-component', {
     template: '<div>A custom component!</div>'
   })
   
   // create a root instance
   new Vue({
     el: '#example'
   })
   

   _{Which will render HTML:}:

   <div id="example">
     <div>A custom component!</div>
   </div>
   

2. Local Registration :

   You don’t have to register every component globally. You can make a component available only in the scope of another instance/component by registering it with the components instance option:

   var Child = {
     template: '<div>A custom component!</div>'
   }
   
   new Vue({
     // ...
     components: {
       // <my-component> will only be available in parent's template
       'my-component': Child
     }
   })
   

   The same encapsulation applies for other registerable Vue features, such as directives.

Read more at https://vuejs.org/v2/guide/components.html#Using-Components

---

Before Updated:

In WebStorm, a library is a file or a set of files whose functions and methods are added to WebStorm's internal knowledge in addition to the functions and methods that WebStorm retrieves from the project code that you edit. In the scope of a project, its libraries by default are write-protected.

WebStorm uses libraries only to enhance coding assistance (that is, code completion, syntax highlighting, navigation, and documentation lookup). Please note that a library is not a way to manage your project dependencies.

Source: https://www.jetbrains.com/help/webstorm/configuring-javascript-libraries.html

Simply, upgrade WebStorm from version 2017.2.4 to 2017.3 which fixed this issue. It is tested.

Comments

[Snsxn]

I’m having this exact problem with WebStorm 2017.3.3

[Jan Tajovsky]

Me too. Can you set a bounty for this question?

[Bullet-tooth]

@JanTajovsky what do you mean?

[Jan Tajovsky]

@Bullet-tooth stackoverflow.com/help/bounty

[Wolfgang Blessen]

What happens, when you click on "more" ? In phpStorm it is possible to add custom tags and attributes as valid.

[Snsxn]

JetBrains Support contacted. It's a problem with dynamic binding of mixins, directives etc of VueJS. They are working on it.

[Przemek Nowak]

@Snsxn could you provide the link to reported issue? I don't want to create duplicate. Thx

[Snsxn]

@PrzemekNowak issue: youtrack.jetbrains.com/issue/WEB-31682. related to youtrack.jetbrains.com/issue/WEB-30742

[youpilat13]

@Snsxn what's about 2017.3

[Jan Tajovsky]

@AsifAli72090 It is not working in 2017.3 The IDE does not recognize <b-* tags. I think it might be connected to the way how bootstrap register its components. When I register the component using Vue.use() IDE can pick it up.

[ulou]

I created all aliases. Just create custom file e.g. vue-boostrap.js paste this: pastebin.com/Z3cBgPyp and import this file in main.js

[ulou]

I created all aliases. Just create custom file e.g. vue-boostrap.js paste this: pastebin.com/Z3cBgPyp and import this file in main.js

[alvaro.canepa]

Using phpStorm 2019.2 isn't necessary to import the vue-bootstrap.js. PhpStorm read the file from project and Vue is not affected.

[Eric]

Even after register a component, this is still no content assistant for tag properties, in WebStorm 2019.1.3.