N
Nuxt•2mo ago
Geferon

Module Plugin not being typed

I'm making two modules, one which has the other one as an optional dependency specified via moduleDependencies, but for some reason it seems the plugin types are not being processed by nuxt at all, the plugin names don't appear in the 'dependsOn' property, the provides aren't showing up in the NuxtApp interface... I don't know what I am doing wrong, any ideas of what may be the issue?
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Geferon. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, there are several common pitfalls and requirements when working with module plugins, type augmentation, and dependencies in Nuxt 3/4: 1. Type Augmentation for Provided Helpers
If your plugin provides helpers (via the provide key), Nuxt should automatically type them for useNuxtApp() and templates. However, for advanced or cross-module scenarios, you may need to manually augment the types. This is done by declaring the helper in a d.ts file, for example: 
   // index.d.ts
   declare module '#app' {
     interface NuxtApp {
       $hello(msg: string): string
     }
   }

   declare module 'vue' {
     interface ComponentCustomProperties {
       $hello(msg: string): string
     }
   }

   export {}
   
   // index.d.ts
   declare module '#app' {
     interface NuxtApp {
       $hello(msg: string): string
     }
   }

   declare module 'vue' {
     interface ComponentCustomProperties {
       $hello(msg: string): string
     }
   }

   export {}
This ensures that TypeScript recognizes your injected properties in both the Nuxt app and Vue components. If you don't do this, TypeScript may treat your injected properties as unknown or not recognize them at all, especially in IDEs like WebStorm or PhpStorm, which have known issues with global property augmentation [Typing Plugins]. 2. Correct Path for Type Imports
There is a known issue where type imports in generated plugin .d.ts files use "nuxt/app" instead of "#app", which breaks type augmentation. Manually replacing "nuxt/app" with "#app" in your built module's type files can resolve this, but it's a workaround. The root cause is often related to how your module is built and how Nuxt resolves type augmentation [Plugin types break NuxtAppInjections type]. 3. Module Dependencies and Plugin Registration
When using moduleDependencies, ensure that: - Your dependent module is properly installed and resolved in the consuming project. - Plugins are placed in the correct directory (runtime/app/plugin.ts for modules). - You are not using link: in your workspace, as this can cause Nuxt to resolve types from a different node_modules folder, breaking augmentation. Use file: or package and install your module as a .tgz file instead [Plugin types break NuxtAppInjections type]. 4. Plugin Names and dependsOn
For the dependsOn property to work, your plugins must have a name property. If the plugin name is missing, Nuxt cannot resolve dependencies between plugins. Make sure your plugins are defined like this: 
   export default defineNuxtPlugin({
     name: 'my-plugin',
     provide: { ... },
     // ...
   })
   
   export default defineNuxtPlugin({
     name: 'my-plugin',
     provide: { ... },
     // ...
   })
Then, in the dependent plugin: 
   export default defineNuxtPlugin({
     name: 'dependent-plugin',
     dependsOn: ['my-plugin'],
     // ...
   })
   
   export default defineNuxtPlugin({
     name: 'dependent-plugin',
     dependsOn: ['my-plugin'],
     // ...
   })
This ensures that the dependency order is respected and that the dependsOn property is recognized [Creating Plugins]. 5. TypeScript Configurations
If you are developing a module, ensure your tsconfig.json is set up to extend the correct Nuxt configs, and that your type files are included in the build output. There have been recent changes in how Nuxt handles multiple tsconfig files for modules, playgrounds, server, and app contexts [Module sub dependencies aliases lost after 3.19.2]. Summary of Troubleshooting Steps: - Ensure your plugins have a name property if you use dependsOn. - Manually augment types in a d.ts file if automatic typing fails. - Check that your module's type files import from #app, not nuxt/app. - Avoid using link: for local module development; use file: or package the module. - Place plugins in the correct directory (runtime/app/plugin.ts for modules). - Double-check your tsconfig.json setup for both the module and the consuming app. If after these steps your plugin types still do not appear, it may be due to a bug or an edge case in Nuxt's type resolution, as discussed in the referenced issues. In that case, reviewing the latest Nuxt releases and related GitHub issues for fixes or workarounds is recommended. If you need more specific help, please provide code snippets of your module/plugin structure and type declarations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@132953837915996160> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?