WebStorm 2021.3 shows "Unresolved variable $sdk" when accessing Nuxt.js plugin from component

Question

I'm trying to use Nuxt.js plugins within my project, but WebStorm is not able to correctly recognize what the plugin exposes.

In my case, it's an OpenAPI client, and without autocompletion in WebStorm, I am pretty much unable to work with it at all, without looking up every endpoint manually.

To visualize the problem, I've created a fresh project as a reproducer.

https://github.com/mklueh/nuxt-plugin-webstorm-autocomplete-reproducer

The plugin simply exposes a demo function, that I try to access from a component.

my.plugin.js

export default async ({app}, inject) => {
  inject("sdk", {
    "thisIsATestMethodThatShouldBeRecognized": function () {
      return "hello from plugin";
    }
  })
}

component

For whatever reason, I cannot enable Node.js coding assistance in this reproducer project, but in my real project, it is enabled. So I'm not sure if this is related and cause of the issue.

How can I ensure, that WebStorm finds what Nuxt.js plugins expose?

Answer 1

It turns out you have to use Vue.prototype explicitly to register $sdk to the global Vue context.

Changing my plugin to this does the trick

import Vue from "vue";

export default async ({app}, inject) => {
  const plugin = {
    "thisIsATestMethodThatShouldBeRecognized": function () {
      return "hello from plugin";
    }
  };

  Vue.prototype.$sdk = plugin;

  inject("sdk", plugin);
}