N
Nuxt•2mo ago
dine

Set @nuxtjs/i18n options from module

I'm trying to use the latest @nuxtjs/i18n on a module and I'd like it to already set the default i18n options and locales for the project using this module. Is there a way to make it work without declaring locales again in the playground nuxt.config.ts? I created an reproduction here: https://stackblitz.com/edit/github-5akuzomv?file=playground%2Fapp.vue,playground%2Fnuxt.config.ts%3AL3 #i18n
StackBlitz
Nuxt - Starter - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
3 Replies
kapa.ai
kapa.ai•2mo ago
Hi @dine. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To answer your question about setting @nuxtjs/i18n options from a module in Nuxt, I'll refer to the relevant information from the provided knowledge sources. Based on the information available, it appears that you can set the i18n options in your module's configuration. However, the exact method for doing this from within a custom module is not explicitly covered in the provided knowledge sources. That being said, we can infer a possible approach based on how Nuxt configuration generally works: 1. In your module's setup function, you could extend the Nuxt configuration to include the i18n options. This would typically be done using the extendConfig method or by directly modifying the nuxt.options object. 2. Your module could set default i18n options, which the main project could then override if needed. Here's a conceptual example of how this might look in your module: 
export default defineNuxtModule({
  setup(options, nuxt) {
    // Extend Nuxt config with i18n options
    nuxt.options.i18n = {
      locales: [
        { code: 'en', iso: 'en-US', file: 'en.json' },
        { code: 'fr', iso: 'fr-FR', file: 'fr.json' }
      ],
      defaultLocale: 'en',
      // other i18n options...
    }

    // Ensure @nuxtjs/i18n is added to modules
    if (!nuxt.options.modules.includes('@nuxtjs/i18n')) {
      nuxt.options.modules.push('@nuxtjs/i18n')
    }
  }
})
export default defineNuxtModule({
  setup(options, nuxt) {
    // Extend Nuxt config with i18n options
    nuxt.options.i18n = {
      locales: [
        { code: 'en', iso: 'en-US', file: 'en.json' },
        { code: 'fr', iso: 'fr-FR', file: 'fr.json' }
      ],
      defaultLocale: 'en',
      // other i18n options...
    }

    // Ensure @nuxtjs/i18n is added to modules
    if (!nuxt.options.modules.includes('@nuxtjs/i18n')) {
      nuxt.options.modules.push('@nuxtjs/i18n')
    }
  }
})
However, it's important to note that this approach is not explicitly documented in the provided sources, and there might be nuances or best practices specific to @nuxtjs/i18n that are not covered here. For the most accurate and up-to-date information on configuring @nuxtjs/i18n from within a module, I recommend checking the official @nuxtjs/i18n documentation or reaching out to the module's maintainers directly. Stack Overflow: Nuxt 3 i18n browser detection not working provides some insights into i18n configuration, but it doesn't specifically address setting options from within a module. If you need more specific guidance, you might want to consult the Nuxt module development documentation or the @nuxtjs/i18n GitHub repository for advanced usage scenarios. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•2mo ago
<@607564534684844059> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
dine
dineOP•2mo ago
Tried to set them using nuxt.options but it also doesn't work: https://stackblitz.com/edit/github-5akuzomv?file=playground%2Fnuxt.config.ts,src%2Fmodule.ts%3AL42
StackBlitz
Nuxt - Starter - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

Did you find this page helpful?