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?

Answer 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

Answer 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.

Answer 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://v2.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.