Nuxt•3mo ago

nuxtjs/i18n and SSR

In my project, we are using nuxt-i18n and SSR. We habe the problem, that when coming in a page, the title and fields are not being translated on server side, only later on the clientside. How can the page be translated on the serverside already?

7 Replies

kapa.ai•3mo ago

Hi @L4res | Pascal. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- When using Nuxt with SSR and @nuxtjs/i18n, translations should be rendered on the server so that the initial HTML is already localized. If you are seeing untranslated content on the server and only seeing translations after hydration on the client, this usually means that the translation function (t) is being called too early (before the locale is set), or the translation keys are not available during SSR. Here are some best practices and troubleshooting steps based on the knowledge sources: 1. Ensure Proper SSR Configuration
Make sure SSR is enabled in your nuxt.config.ts:

   export default defineNuxtConfig({
     ssr: true,
     // ...other config
   })

   export default defineNuxtConfig({
     ssr: true,
     // ...other config
   })

By default, Nuxt uses universal rendering, which should SSR your pages and translations if configured correctly Nuxt Rendering Modes. 2. Use Translations in the Template, Not in Data
If you call the translation function (t) inside the setup or data initialization, it may not react to locale changes or may run before the locale is set. Instead, use the translation function directly in the template:

   <template>
     <h1>{{ $t('page.title') }}</h1>
   </template>

   <template>
     <h1>{{ $t('page.title') }}</h1>
   </template>

Or, if you use the Composition API:

   <script setup>
   const { t } = useI18n()
   </script>
   <template>
     <h1>{{ t('page.title') }}</h1>
   </template>

   <script setup>
   const { t } = useI18n()
   </script>
   <template>
     <h1>{{ t('page.title') }}</h1>
   </template>

This ensures that translations are reactive and rendered correctly on the server and client How to translate a property of and array of objects using vue-i18n. 3. Avoid Calling t When Defining Static Data
If you define arrays or objects with translated values at the top level of your script, those translations may be evaluated before the locale is set, resulting in untranslated content on SSR. Instead, translate at render time in the template, or use computed properties that depend on the current locale. 4. Check Your i18n Configuration Location
Make sure your i18n configuration (locales, defaultLocale, etc.) is in the correct place—usually in nuxt.config.ts for @nuxtjs/i18n. Misplacing this config can cause the module to not initialize properly, leading to issues with SSR translations Nuxt 3 i18n browser detection not working. 5. Content Modules and SSR
If you use Nuxt Content with i18n, follow the recommended structure for language folders and ensure your content is loaded based on the current locale during SSR I18n module integration. Summary:
- Use translation functions in the template or computed properties, not in static data. - Ensure i18n config is in nuxt.config.ts. - SSR should work out of the box if configured correctly. If you follow these practices and still see untranslated content on SSR, double-check your i18n module version and configuration, and ensure that your translation files are loaded and available during server-side rendering. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3mo ago

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

L4res | PascalOP•3mo ago

in which folder are the i18n translation files expected on the serverside after the build?

mk4hmed•3mo ago

we have them in <rootDir>/i18n/locales (used to be like that in nuxt 3, and kept it the same after migrating to nuxt 4, and still works)

L4res | PascalOP•3mo ago

thank you for the response. I really don’t understand why it is not working b/c on clientside it’s the variables are being translated. Only with on serverside it’s not. Locally, it is also working, even on serverside…it’s really confusing. What I see is, that locally, i have for example multiple file, per language code one and in the production build I only have an i18n.json file. Is there any documentation about that?

Cake•3mo ago

what's your i18n config??

L4res | PascalOP•3mo ago

I found the cause why the translation are not available on serverside 🤘 it’s because of lazy loading and I did not have a defineI18nLocale conposable. Shouldn’t there be a default one, which get‘s the local files?

Gaming

Programming

nuxtjs/i18n and SSR

Did you find this page helpful?