Nuxt•2mo ago

Creating a module that depends on another module and include it's typings

I want my module to depend in a module, such as the i18n module, and I want to be able to register some plugins that call useNuxtApp() to then use $i18n, but the problem is that despite having the i18n module in peer-dependencies, I don't get any type coverage. How do I achieve this?

5 Replies

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: ---------------------- To ensure your Nuxt module both depends on another module (like @nuxtjs/i18n) and provides type coverage for injected properties (such as $i18n), you need to address two aspects: 1. Ensuring the Dependency is Installed Use Nuxt Kit's installModule utility in your module's setup function to programmatically install the dependency. This guarantees the dependent module is loaded before your code runs:

import { defineNuxtModule, installModule } from '@nuxt/kit'

export default defineNuxtModule({
  async setup(options, nuxt) {
    await installModule('@nuxtjs/i18n')
    // ...your setup logic
  }
})

import { defineNuxtModule, installModule } from '@nuxt/kit'

export default defineNuxtModule({
  async setup(options, nuxt) {
    await installModule('@nuxtjs/i18n')
    // ...your setup logic
  }
})

This approach ensures the i18n module is available when your plugins run, so useNuxtApp().$i18n will be defined when accessed in your plugins or composables.
Using Other Modules in Your Module 2. Providing Type Coverage for Injected Properties To get type coverage for properties injected by other modules (like $i18n), you need to augment the Nuxt types in your own module. This is typically done by generating a .d.ts file that extends the relevant interfaces. You can use the addTypeTemplate utility for this:

import { defineNuxtModule, addTypeTemplate } from '@nuxt/kit'
export default defineNuxtModule({
  setup(options, nuxt) {
    addTypeTemplate({
      filename: 'types/i18n-injection.d.ts',
      getContents: () => `
        declare module '#app' {
          interface NuxtApp {
            $i18n: any // Replace 'any' with the correct type if available
          }
        }
        declare module 'vue' {
          interface ComponentCustomProperties {
            $i18n: any // Replace 'any' with the correct type if available
          }
        }
        export {}
      `
    })
  }
})

import { defineNuxtModule, addTypeTemplate } from '@nuxt/kit'
export default defineNuxtModule({
  setup(options, nuxt) {
    addTypeTemplate({
      filename: 'types/i18n-injection.d.ts',
      getContents: () => `
        declare module '#app' {
          interface NuxtApp {
            $i18n: any // Replace 'any' with the correct type if available
          }
        }
        declare module 'vue' {
          interface ComponentCustomProperties {
            $i18n: any // Replace 'any' with the correct type if available
          }
        }
        export {}
      `
    })
  }
})

This will ensure that when users of your module use useNuxtApp().$i18n or access $i18n in components, they get proper type support.
Adding Type Declarations Notes - If the i18n module already provides its own type augmentation, you may not need to duplicate it, but providing your own ensures type safety for your consumers. - If you want to use the actual type from i18n, you can import it and use it instead of any. Summary - Use installModule to ensure the dependency is present and loaded before your plugins run. - Use addTypeTemplate to augment types and provide type coverage for injected properties. This approach is the recommended way to handle both runtime and type dependencies between Nuxt modules according to the official documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

GeferonOP•2mo ago

@kapa.ai The problem is that I believe the types should be added to the .nuxt folder in the module, but I don't see it anywhere, not even things like useI18n or anything

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- When you run nuxt dev or nuxt build, Nuxt generates type files in the .nuxt directory, such as .nuxt/nuxt.d.ts, which includes types for modules and auto-imported composables. However, for types like useI18n or injected properties from other modules, their presence in .nuxt/nuxt.d.ts depends on whether those modules properly register their types and whether your project is configured to auto-import them. If you do not see types like useI18n or others from your dependencies in .nuxt/nuxt.d.ts, possible reasons include: - The module (e.g., i18n) may not be properly installed or registered in your project. - The module may not be using Nuxt's addTypeTemplate or similar utilities to inject its types. - Your nuxt.config may not be set up to auto-import composables from third-party packages. You can explicitly add auto-imports for third-party composables like this:

  export default defineNuxtConfig({
    imports: {
      presets: [
        {
          from: 'vue-i18n',
          imports: ['useI18n'],
        },
      ],
    },
  })

  export default defineNuxtConfig({
    imports: {
      presets: [
        {
          from: 'vue-i18n',
          imports: ['useI18n'],
        },
      ],
    },
  })

Auto-import from Third-Party Packages - Type generation only happens when you run nuxt dev or nuxt build. If you add a composable or module without running the dev server, types will not be generated until you do so.
Auto-generated Types If you are writing your own module and want to ensure types are added to the user's .nuxt folder, you should use addTypeTemplate in your module. This will write a .d.ts file and add a reference to it in the generated nuxt.d.ts file, making the types available to the project:

import { addTypeTemplate, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
  setup (options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `// your type declarations`
    })
  }
})

import { addTypeTemplate, defineNuxtModule } from '@nuxt/kit'
export default defineNuxtModule({
  setup (options, nuxt) {
    addTypeTemplate({
      filename: 'types/my-module.d.ts',
      getContents: () => `// your type declarations`
    })
  }
})

Adding Type Declarations If you still do not see the types, double-check that your module is being loaded, the type template is being generated, and that you are running the dev server or build process to trigger type generation. If the third-party module does not provide type augmentation, you may need to add your own type declarations as described above. If you follow these steps and still do not see the types, the knowledge sources do not provide further troubleshooting steps for this scenario. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

Gaming

Programming

Creating a module that depends on another module and include it's typings

Did you find this page helpful?