N
Nuxt•3w ago
PetyXbron

i18n module - $t is not defined

I am having trouble with nuxt i18n module. Everything works fine in development mode, but when I want to run a production on Ubuntu with Docker, I get 500 error - $t is not defined. Why's that? Everything other works cool, so I wouldn't say that modules aren't installed. But maybe the translations file are missing? Where are they stored in production?
9 Replies
kapa.ai
kapa.ai•3w ago
Hi @PetyXbron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue where $t is not defined in production (but works in development) with the Nuxt i18n module is often related to missing translation files in your production build. In Nuxt, especially when using the @nuxtjs/i18n module with the langDir and lazy options, your translation files (e.g., JSON or JS files for each locale) must be present in the build output that gets copied into your Docker image or production server. Common causes and solutions: 1. Translation files not included in the build output:
If your Docker build process or .dockerignore excludes the directory where your translation files are stored (commonly lang/ or locales/), they won't be available in production, causing $t to be undefined or throw errors. Make sure your translation files are copied into the Docker image and are present in the correct directory in your production environment. 2. Incorrect configuration of i18n module:
If you use the langDir and lazy options, ensure that the langDir path is correct and that the files are present. For example: 
   i18n: {
     lazy: true,
     langDir: 'lang',
     locales: [
       { code: 'en', file: 'en-US.json' },
       { code: 'fr', file: 'fr-FR.json' }
     ],
     defaultLocale: 'en'
   }
   
   i18n: {
     lazy: true,
     langDir: 'lang',
     locales: [
       { code: 'en', file: 'en-US.json' },
       { code: 'fr', file: 'fr-FR.json' }
     ],
     defaultLocale: 'en'
   }
In this case, the lang/ directory and its files must exist in your production build. 3. Docker build context and .dockerignore:
If you have a .dockerignore file, ensure it does not exclude your translation files or their directory. A common mistake is to have a rule like lang/ or locales/ in .dockerignore, which will prevent those files from being copied into the image. This was a root cause in a similar issue where missing files led to build/runtime errors in Docker environments Docker Build Problem "Error: Cannot find module". 4. Check your build and deployment process:
Make sure that your build step (e.g., nuxt build or nuxi build) is run after all necessary files are in place, and that the output directory (usually .output/ for Nuxt 3) contains everything needed for production. Summary:
The most likely reason for $t being undefined in production is that your translation files are missing from the production build or Docker image. Double-check your .dockerignore, your Dockerfile copy steps, and ensure your translation files are present in the final build output. If you need more details on how to structure your i18n configuration and translation files, see the official Nuxt i18n documentation and related troubleshooting posts i18n is not working after update nuxt to 3.8.0, Localization of numbers and dates is not working in Nuxt3 + VueI18n, and Docker Build Problem "Error: Cannot find module". ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
PetyXbron
PetyXbronOP•3w ago
@kapa.ai locales are not blocked by Docker in any way. How can I check the final output folder? Because I supose that the translations aren't in public/ or server/ folder... But what I am interested in is the i18n config and lazy loading. Because I am merging more language files into one. 
    i18n: {
        locales: [
            { code: 'en', name: 'English', flag: '🇺🇸', country: 'US', files: ['en/dashboard.json', 'en/landing.json'], },
            { code: 'cs', name: 'Čeština', flag: '🇨🇿', country: 'CZ', files: ['cs/dashboard.json', 'cs/landing.json'], },
        ],
        defaultLocale: 'en',
        strategy: 'no_prefix',
        lazy: true,
        detectBrowserLanguage: {
            useCookie: true,
            fallbackLocale: 'en',
            alwaysRedirect: false,
        },
        experimental: {
            localeDetector: 'localeDetector.ts',
        },
    },
    i18n: {
        locales: [
            { code: 'en', name: 'English', flag: '🇺🇸', country: 'US', files: ['en/dashboard.json', 'en/landing.json'], },
            { code: 'cs', name: 'Čeština', flag: '🇨🇿', country: 'CZ', files: ['cs/dashboard.json', 'cs/landing.json'], },
        ],
        defaultLocale: 'en',
        strategy: 'no_prefix',
        lazy: true,
        detectBrowserLanguage: {
            useCookie: true,
            fallbackLocale: 'en',
            alwaysRedirect: false,
        },
        experimental: {
            localeDetector: 'localeDetector.ts',
        },
    },
Can you check this config?
kapa.ai
kapa.ai•3w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- Your i18n configuration appears to be mostly correct for using lazy loading and multiple files per locale. The files property in each locale entry is supported by the Nuxt i18n module, allowing you to split translations into multiple files per language. With lazy: true, these files should be loaded on demand. Key points from your config: 
i18n: {
    locales: [
        { code: 'en', files: ['en/dashboard.json', 'en/landing.json'] },
        { code: 'cs', files: ['cs/dashboard.json', 'cs/landing.json'] },
    ],
    defaultLocale: 'en',
    strategy: 'no_prefix',
    lazy: true,
    detectBrowserLanguage: {
        useCookie: true,
        fallbackLocale: 'en',
        alwaysRedirect: false,
    },
    experimental: {
        localeDetector: 'localeDetector.ts',
    },
}
i18n: {
    locales: [
        { code: 'en', files: ['en/dashboard.json', 'en/landing.json'] },
        { code: 'cs', files: ['cs/dashboard.json', 'cs/landing.json'] },
    ],
    defaultLocale: 'en',
    strategy: 'no_prefix',
    lazy: true,
    detectBrowserLanguage: {
        useCookie: true,
        fallbackLocale: 'en',
        alwaysRedirect: false,
    },
    experimental: {
        localeDetector: 'localeDetector.ts',
    },
}
What to check: 1. Translation Files Location:
With lazy: true and the files property, your translation files should be located in the directory specified by langDir (default is locales/ if not set). For example, if you have: 
   locales/
     en/
       dashboard.json
       landing.json
     cs/
       dashboard.json
       landing.json
   
   locales/
     en/
       dashboard.json
       landing.json
     cs/
       dashboard.json
       landing.json
Make sure this directory and all its files are present in your production build output. The files are not placed in public/ or server/—they should be in the directory you specify with langDir and included in the build context. 2. Build Output Check:
The knowledge sources do not specify a direct way to check the final output folder for translation files, but you can inspect your build output directory (e.g., .output/ for Nuxt 3) after running nuxi build. Ensure your locales/ (or your custom langDir) is present and contains all translation files. 3. Docker Context:
Since you mention Docker, ensure your Dockerfile copies the locales/ (or your custom langDir) directory into the image. If this directory is missing in the final image, lazy loading will fail and $t will be undefined. 4. Config Placement:
The knowledge sources highlight that some i18n options must be in nuxt.config.ts (like locales, defaultLocale, etc.), not in a separate i18n.config.ts file, to ensure proper behavior—especially for browser language detection and lazy loading. Double-check that your config is in the correct place if you experience issues Nuxt 3 i18n browser detection not working. Summary:
Your config is valid for lazy loading and multiple files per locale. The most common issue is missing translation files in the build output or Docker image. Double-check your build output and Docker context to ensure all translation files are present. If you still encounter issues, verify that your config is in the correct file and that the langDir is set and included in your build. If you need a reference for structuring your translation files and i18n config, see the official Nuxt Content + i18n integration example, which also demonstrates fallback strategies and file organization Docs > Integrations. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
PetyXbron
PetyXbronOP•3w ago
@kapa.ai I got a new problem with i18n module. 
    const { loadLocaleMessages } = useI18n()
    const lang = team.settings?.language || "en";
    const t = loadLocaleMessages(lang)
    const { loadLocaleMessages } = useI18n()
    const lang = team.settings?.language || "en";
    const t = loadLocaleMessages(lang)
I want to get translations on server side (api, defineEventHandler() fn) with language I already got from API Why is useI18n undefined? What should I do?
kapa.ai
kapa.ai•3w ago
Let me check the knowledge base for you again. One moment! :books: ---------------------- The reason useI18n is undefined on the server side (inside an API handler using defineEventHandler()) is because useI18n is a composable designed to be used within the Vue component context or setup functions, not in server routes or API handlers. This is a limitation of how Nuxt and Vue composables work: they rely on the Vue or Nuxt app context, which is not available in server-only code like API handlers or middleware. This is explained in the Nuxt documentation, which states that many composables require the correct context and cannot be used outside of components, plugins, or middleware setup functions Vue and Nuxt Composables. If you need to access translations on the server side (e.g., in an API route), you cannot use useI18n directly. Instead, you would need to manually load and parse your translation files based on the language code, or implement a utility function that reads the JSON files from disk and returns the appropriate translations. Summary:
- useI18n is undefined in server routes because it is only available in the Vue app context. - To get translations on the server, you must manually load the translation files (e.g., using fs to read the JSON files) based on the language you want. The knowledge sources do not provide a built-in way to use useI18n or $t in server API handlers. If you need further guidance on how to manually load translation files, let me know! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3w ago
<@411436203330502658> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
Cake
Cake•3w ago

Did you find this page helpful?