unrecognized tags in WebStorm

Steps to reproduce

create a template with <v-layout>, <v-flex>, <v-card>, <v-card-*> components

Versions

0.14.8

What is expected ?

v-layout and other tags should be recognized by WebStorm as known elements

What is actually happening ?

Get a warning “Unknown html tag”

Reproduction Link

screenshot: http://imgur.com/a/UOAZr

Fix

Just my guess - I didn’t checked all but some of the tags that are not recognized don’t have the “name” property. For example <v-card> doesn’t have it and it’s not recognized but <v-card-media> has and it’s recognized

Edit: some components without “name” have “functional” property set to true, and those with “name” are not “functional”, I’m not sure if adding “name” to “functional” components doesn’t break anything

[sdarnell]

As per @jacekkarczmarczyk’s comment, I found that if I added a name: entry to the functional components in the src directory of node_modules, Webstorm would then correctly detect the component. For example, in VCardTitle I added a name: 'v-card-title',.

To be fair on the Webstorm plugin, Vue is so flexible in what can be a component, it is pretty hard to detect what is a Vue component. Even working back from the Vue.component() calls in this case requires non-trivial data flow analysis/code simulation:

  Object.keys(Components).forEach(key => {
    Vue.component(key, Components[key])
  })

Note that webstorm does detect components declared with Vue.extends and Vue.component(‘literal-name’, …).

For reference, the part of the webstorm plugin that does the detection seems to be: https://github.com/JetBrains/intellij-plugins/blob/9e149f9a12c6844a767aa674e7da44c2d07a4f54/vuejs/src/org/jetbrains/vuejs/codeInsight/VueFrameworkHandler.kt#L106

@ChavaSobreyra I created a Webstorm issue (https://youtrack.jetbrains.com/issue/WEB-28318), but I’m not convinced Webstorm can do a sensible job without some hints.

At the cost of adding a name property to the remaining components that don’t already have one, the result would be pretty good support in Webstorm. The benefits aren’t just tag detection, but also pretty good intellisense for component props/attributes (mixin props aren’t detected yet though).

[ChavaSobreyra]

Sound like an issue to take up with the WebStorm vue plugin team, no? Doesn’t look like there’s anything invalid on the vuetify side…

By the way, in Webstorm you can click on the unrecognized elements and hit alt + enter which will bring up a menu with an option add x to custom html tags