Nuxt•5d ago

Types added via module

I am reading https://nuxt.com/docs/guide/going-further/modules#adding-type-declarations and trying to understand something. I have a type that I want "exported" from my module, or at least "known" when something needs to introspect a property in the app. I don't really understand the mechanics here. In the example they declare module 'nitropack' I guess because they are overriding/extending something exposed in nitro. In my case, if I just want the type to be discoverable (both within the module and outside it), do I use declare 'global' or what? I see my nuxt.d.ts and it has the /// <reference path="types/my-module.d.ts" /> there, but the types I declare there are not found in my app. I did see a comment from Daniel saying that TS types aren't Autoimportable by design, so maybe I am barking up the wrong tree or my approach is not correct. Can anyone point me to somewhere I can go to better understand this stuff? I feel like such a luddite when it comes to TS and these types of issues don't help.

Nuxt

Module Author Guide · Nuxt Advanced

Learn how to create a Nuxt Module to integrate, enhance or extend any Nuxt applications.

3 Replies

kapa.ai•5d ago

Hi @dmarr. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're correct that TypeScript types are not "auto-imported" in the same way as functions or composables in Nuxt. When you use addTypeTemplate in a Nuxt module, it writes a type declaration file and adds a reference to it in nuxt.d.ts, which should make the types available for type checking and IDE support—provided they're declared in a way that TypeScript can find them globally or via module augmentation. In the example you referenced, the type is augmenting the nitropack module because the goal is to extend Nitro's types. If you want your type to be globally available (so you don't have to import it everywhere), you should declare it in the global namespace. This is done using declare global inside your .d.ts file:

// types/my-module.d.ts
declare global {
  interface MyCustomType {
    foo: string
    bar: number
  }
}

export {}

// types/my-module.d.ts
declare global {
  interface MyCustomType {
    foo: string
    bar: number
  }
}

export {}

This pattern ensures that your type is available everywhere in your app without explicit imports, as long as the .d.ts file is referenced (which Nuxt does by adding a /// <reference ...> in nuxt.d.ts) How to Automatically Recognize Type Definitions in Nuxt.js Project Without Explicit Imports in VSCode?. If you instead use declare module 'some-module', you're augmenting an existing module's types, which is only necessary if you want to extend types from a specific package (like nitropack or vue). To summarize: - Use declare global in your type declaration file if you want the type to be globally available. - Make sure your type declaration file is referenced in nuxt.d.ts (Nuxt's addTypeTemplate does this for you). - You do not need to (and cannot) "auto-import" types in the same way as functions or composables—this is a TypeScript design decision. If your types are still not recognized, double-check that your tsconfig.json extends from .nuxt/tsconfig.json and that you haven't overridden important options like compilerOptions.paths, as this can break type resolution in Nuxt Auto-generated Types. For more on this topic, see the discussion and example in Adding Type Declarations and the Stack Overflow answer about global types in Nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@139883350096740354> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

dmarrOP•5d ago

ok for layers it seems i can just add index.d.ts to the root and it will be added

Gaming

Programming

Types added via module

Did you find this page helpful?