N
Nuxt•2mo ago
Numil

Auto import enums usable from a Nuxt Module

Hello, i want to auto import enums from my Nuxt Module but i'm struggling, My generated .d.ts files for the module have this in them for enums: 
import type { UnwrapRef } from 'vue'
declare module 'vue' {
    interface ComponentCustomProperties {
        readonly FileUploadError: UnwrapRef<
            (typeof import('/Users/XXXXXXX/Project/XXXX/node_modules/@package/dist/runtime/interfaces/UI.d.ts'))['FileUploadError']
        >
  }
}
import type { UnwrapRef } from 'vue'
declare module 'vue' {
    interface ComponentCustomProperties {
        readonly FileUploadError: UnwrapRef<
            (typeof import('/Users/XXXXXXX/Project/XXXX/node_modules/@package/dist/runtime/interfaces/UI.d.ts'))['FileUploadError']
        >
  }
}
The d.ts file has: 
export declare enum FileUploadError {
    SIZE = "size",
    TYPE = "type",
    MULTIPLE = "multiple",
    READ = "read"
}
export declare enum FileUploadError {
    SIZE = "size",
    TYPE = "type",
    MULTIPLE = "multiple",
    READ = "read"
}
But i always get this when using them as enums a vue file (here in a template): can't access property "SIZE", _ctx.FileUploadError is undefined I tried pointing the typeof import part to the .js file, but with no luck ! Thank you if you have any solution !
2 Replies
kapa.ai
kapa.ai•2mo ago
Hi @Numil. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I'm sorry, but the knowledge sources do not contain explicit information about auto-importing enums from a Nuxt module so that they are available as global properties in Vue components, nor about resolving the specific runtime error you are encountering (_ctx.FileUploadError is undefined). The available documentation covers auto-imports for composables, functions, and utilities, and how to add type declarations or auto-imports for functions and composables using Nuxt Kit utilities like addImports and addTypeTemplate—but it does not address auto-importing enums as global properties or making them available at runtime in Vue components. The auto-import system in Nuxt is primarily designed for functions and composables, not for making TypeScript enums available as runtime values in the Vue instance context or as global properties in templates. Type-only imports (as in your example) do not provide runtime values, which is likely why you see undefined at runtime, even though the types are available in TypeScript. If you need an enum to be available at runtime in your components, you will need to explicitly import it in each file or provide it via a plugin or provide/inject pattern. The knowledge sources do not provide a built-in way to auto-import enums as runtime values in Nuxt modules or applications. If you need more details on auto-imports for functions and composables, you can refer to the official documentation: - Nuxt auto-imports guide - Nuxt Kit auto-imports API - Adding type declarations in modules But for your specific enum use case, the knowledge sources do not provide a solution. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@108292831583440896> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?