Search code examples
vue.jsnuxt.jsnuxtjs3

Custom plugin in nuxt 3 has unknown type

In my nuxt 3 application, I have created a plugin in plugins/ folder.

// plugins/customPlugin.ts

export default defineNuxtPlugin(() => ({
   provide: {
      hello: (msg: string) => console.log(`This is your message: ${msg}`),
   },
}));

And then I am using it in my component like:

// component.vue 

const { $hello } = useNuxtApp();

$hello('custom message');

It works, in the browser console I see my log. But the problem is, that the typescript gives me an error in IDE, saying that $hello is "TS2571: Object is of type 'unknown'"

Tried to delete node modules and .nuxt folders and reinstall them, didn't work.

Solution

  • UPDATE: Turns out that there is a bug in jetbrains IDEs (Phpstorm, webstorm). Tried opening same repo in vscode, plugins are typed OK

    About bug: https://youtrack.jetbrains.com/issue/WEB-59818/Vue-custom-global-properties-added-by-augmenting-vue-are-not-resolved