Unrecognised Vue Directive in Jet Brains IDE when using floating-vue directive

[nirpan]

This issue might not be directly a FloatingVue issue but I feel like it is related to at least raise it and hopefully get some pointers on resolving it.

When using FloatingVue with the install plugin option and then using it within the components, we get an warning Unrecognized Vue directive on all the JetBrains IDE (PHPStorm, WebStorm, Ultimate). .

If we use the directive method of installation, then that warning is not displayed.

This issue has been logged with YouTrack and has a specific example with FloatingVue (https://youtrack.jetbrains.com/issue/WEB-52855/Vue-3-Custom-Directives-not-being-picked-up-by-IDE-if-defined-on-App-object#focus=Comments-27-6228126.0-0).

The solution suggested seems to be the library to provide a WebType definition (https://blog.jetbrains.com/webstorm/2021/01/web-types/) or a temporary fix to not show the error on the JetBrains IDE by creating a web-types file to hide all warnings for the directive. I have created an added the web-types to the package.json which hides the warning but I was wondering if there was a better solution that might even provide autocomplete when using the directive?

{
    "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/v2-preview/web-types.json",
    "name": "hellWorld",
    "framework": "vue",
    "version": "1.0.0",
    "contributions": {
        "html": {
            "vue-directives": [
                {
                    "name": "tooltip",
                    "description": "Floating Vue directive",
                    "doc-url": "https://floating-vue.starpad.dev/guide/",
                    "argument": "tooltip"
                }
            ]
        }
    }
}

[Akryum]

Would having TypeScript types help solve this? I'm not really familiar with Jetbrains IDEs

[nirpan]

@Akryum I think it would as normally the suggested solution for these sort of issues is to install types. You can see package like bootstrap-vue auto generate it: https://github.com/bootstrap-vue/bootstrap-vue/blob/dev/package.json#L16C11-L16C11

[Acetyld]

Also a bump for me, indeed it would be good to generate + publish this. Floating-vue is currently leading in the popper/dropdown/tooltip market in vue. Please add this.