webstorm does not correctly display type of globally injected properties

[ERPedersen]

Environment

• Operating System: Darwin
• Node Version: v14.18.1
• Nuxt Version: 3.2.2
• Nitro Version: 2.2.2
• Package Manager: yarn@1.22.17
• Builder: vite
• User Config: modules, build, runtimeConfig, vite
• Runtime Modules: @nuxt/content@2.4.3, @pinia/nuxt@0.4.6, nuxt3-lazy-load@1.0.2
• Build Modules: -

Reproduction

Documentation issue.

Describe the bug

When injecting helpers into the NuxtApp instance through a plugin, the documentation suggests adding a module declaration for vue.

It seems that this should be changed to @vue/runtime-core for IDEs to correctly detect the type within templates.

Additional context

No response

Logs

No response

[danielroe]

Would you provide a reproduction? 🙏

[ERPedersen]

@danielroe Thanks for responding so quick! 🔥

I have created a CodeSandbox here with a fresh installation of nuxt using npx nuxi init, and included the following files:

• utils/hello.ts, exports a function hello, which has a function type of HelloFunction.
• plugins/hello.ts, injects the hello function into the NuxtApp instance.
• app.vue, uses the hello function in the template.

I have attached a video of the issue, using the same repository as the code sandbox.

Screen.Recording.2023-03-03.at.17.52.39.mov

[danielroe]

First, you should not need to type this yourself - Nuxt types provided properties automatically. Second, this works fine for me both in the CodeSandbox and locally. I think this is likely a WebStorm bug - it probably needs to be updated to use vue rather than @vue/runtime-dom. Would you be happy to raise an issue in their tracker? 🙏

[ERPedersen]

Yes, I will do that. Automatic types are not working for me either, which is why I did this to start with.

[ERPedersen]

YouTrack: [VUE + Typescript] WS / PS does not correctly display type of globally injected properties