OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Semantic-ui-vue components not recognized by WebStorm

  • Thread starter Thread starter Martijn Imhoff
  • Start date Start date
M

Martijn Imhoff

Guest
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​


Code:
<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​


Code:
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)

image

<p>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?</p>

<h3>App.vue</h3>

<pre><code><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>
</code></pre>

<h3>main.js</h3>

<pre><code>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);
</code></pre>

<p>Screenshot of WebStorm (I'm using the latest version)</p>

<p><a href="https://user-images.githubusercontent.com/5647089/43426509-277f5cb4-9456-11e8-9fcb-04c76a35f93c.png" rel="nofollow noreferrer"><img src="https://user-images.githubusercontent.com/5647089/43426509-277f5cb4-9456-11e8-9fcb-04c76a35f93c.png" alt="image"></a></p>
 

Latest posts

Top