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

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);
}

Answer 2

I've just faced this issue and it's really annoying. I looked inside the .nuxt folder to see how plugins are injected and this is what I found:
export default async ({app}, inject) => {
const sdk = {
"thisIsATestMethodThatShouldBeRecognized": function () {
return "hello from plugin";
}
}
app.$sdk = sdk
inject("sdk", sdk)
}
tested on WebStorm 2021.3.1