Semantic-ui-vue components not recognized by WebSt

Question

Semantic-ui-vue components not recognized by WebStorm

I'm using WebStorm as my IDE and normally Vue components are recognized as valid HTML tags, however the components of this integration aren't. Anyone any ideas on how to fix this?

App.vue

<template>
  <div id="app">
    <sui-menu fixed inverted>
      <sui-container>
        <a href="#" is="sui-menu-item" class="header">
          <img src="/src/assets/logo.png" class="logo">
          Project Name
        </a>

        <a is="sui-menu-item" href="#">Home</a>
      </sui-container>
    </sui-menu>

    <sui-container class="main" text>
      <sui-header size="huge">Semantic UI Vue Fixed Template</sui-header>
      <p>This is a basic fixed menu template using fixed size containers.</p>

      <test></test>

    </sui-container>
  </div>
</template>

<script>
  export default {};
</script>

main.js

import Vue from "vue";
import App from "./App";
import SuiVue from "semantic-ui-vue";
import 'semantic-ui-css/semantic.min.css';
import Test from './Test.vue';

Vue.use(SuiVue);

new Vue({
  el: "#app",
  template: '<App/>',
  components: { App }
});

Vue.component('test', Test);

Screenshot of WebStorm (I'm using the latest version)