Using a "ws"plugin inside a store, unkown type?!?

[indigo kraken]

Hi @charred pollen. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

When you provide a property like $ws from a Nuxt plugin, it is available at runtime via useNuxtApp(), but TypeScript may not recognize its type automatically. This often results in TypeScript errors such as "Object is of type 'unknown'" when accessing $ws in your store or components.

To resolve this, you need to augment the NuxtApp type so TypeScript knows about your injected property. Here’s how you can do it:

1. Create or update a type declaration file (e.g., index.d.ts) in your project root:

declare module '#app' {
  interface NuxtApp {
    $ws: YourWsType // Replace with the actual type of your ws instance
  }
}

declare module 'vue' {
  interface ComponentCustomProperties {
    $ws: YourWsType
  }
}

export {}

2. After this, TypeScript will recognize $ws when you use useNuxtApp() or in your components.

This approach is documented in the Nuxt docs for plugin typing. Note that if you are using JetBrains IDEs (like WebStorm or PhpStorm), there is a known bug where these types may not be recognized even if everything is set up correctly. In that case, try using VSCode to confirm your setup works as expected Custom plugin in nuxt 3 has unknown type and Using Composables & Typing Plugins.

Summary:
The $ws is unknown because TypeScript does not know about it by default. You need to augment the NuxtApp type as shown above to fix the type error. If you still see issues in your IDE, it may be due to an IDE-specific bug, not your code.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: