I18n-module: Locale visibly switches on redirecting with statically generated pages

[johnboylesingfield]

Version

nuxt-i18n: 6.15.1
nuxt: 2.14.0

Nuxt configuration

mode:

• [X] universal

Nuxt-i18n configuration

i18n: {
    locales: ['fr', 'en'],
    defaultLocale: 'fr',
    detectBrowserLanguage: {
      useCookie: false,
      onlyOnRoot: true
    },
    vueI18n: {
      fallbackLocale: 'en',
    }
  }

Reproduction Link

I tried to reproduce the bug on codesandbox (here) but it does only appear on my local and production environment (https://ç.dev). Note: if you want to see the bug on my production environment, set your Browser language to anything other than French.

Steps to reproduce

Install a default Static Nuxt site + the module with above configuration.

What is Expected?

The redirect to the english version of the site should be triggered before the french version of the site loads.

What is actually happening?

The french version of the site load for a brief moment, then it is switched to the english version. This cause content to "jump" quickly when the domain loads. Visit my production website to see the bug.

[rchl]

How do you build for production? npm run build & npm run start or npm run generate? In other words, are you generating static pages or running on a node server?

[johnboylesingfield]

I use generate.

But I think my problem is that I don't understand how to route my index files properly. I created an "en" folder in my "pages" folder and put my index.vue (english version) in it. I guess that is not right? I realize that, in my codesandbox, the url for the english portion of my site is "en/en". That's not good...However it does not do that when I do the same thing locally or on my production server, it's still "domain.com/en".

If what I did is fundamentally incorrect, how can I ask the module to render some index-english.vue file in the page directory?

[rchl]

This module does the job of creating locale-prefixed routes. So instead of creating multiple index routes, you are supposed to create just one /index.vue. Then you use locales to render locale-specific strings.

[johnboylesingfield]

Oh, okay. I'm so sorry of not understanding the functionalities correctly.

So, all this module do is enable translated strings of text into a page? It does not support whole page translations?

Last question: what if I have a paragraph of text with links, ilatics, etc - Do I have to manually enter all the strings separately to translate my paragraph or can I bundle translation+markup in some way or another?

Thank you so much and I am sorry again to be so lost.

[rchl]

The point of using a translations module like this one is to create a page once and use translation keys on such page so that it's rendered in the user's language. You can translate whole pages that way.

The basic API for translating a string is $t('translation_key') which you can use from within template interpolation like for example:

<h1>{{ $t('translation_key') }}</h1>

You can check out more complex examples at:

• http://kazupon.github.io/vue-i18n/guide/formatting.html
• http://kazupon.github.io/vue-i18n/guide/interpolation.html#basic-usage

Last question: what if I have a paragraph of text with links, ilatics, etc - Do I have to manually enter all the strings separately to translate my paragraph or can I bundle translation+markup in some way or another?

You could do it with something like:

<div v-html="$t('translation_with_html')`></div>

but that is not recommended as then the HTML would have to be part of translation and would have to be repeated for each language. Proper way would be to have placeholders in your translations and use this approach: http://kazupon.github.io/vue-i18n/guide/interpolation.html#basic-usage

[johnboylesingfield]

I am reopening this because it had nothing to do with me misunderstanding routing. I tried with 1 dummy string translation and it still does it. To recap:

Version

nuxt-i18n: 6.15.1
nuxt: 2.14.5

Nuxt configuration

mode:

• [X] universal

Nuxt-i18n configuration

i18n: {
    locales: ['fr', 'en'],
    defaultLocale: 'en',
    detectBrowserLanguage: {
      useCookie: false,
      onlyOnRoot: true
    },
    vueI18n: {
      fallbackLocale: 'fr',
      messages: {
        en: {
          s1: 'Hi'
        },
        fr: {
          s1: 'Allô'
        }
      }
    }
  }

Steps to reproduce

• Install Nuxt and nuxt-i18n.
• Add above configuration.
• Add {{ $t('s1') }} somewhere in index.vue.
• Run yarn dev and go to localhost:3000 in Chrome.

Note: Same thing happens in production. I use Netifly and deploy with yarn generate

What is Expected?

The redirect to the french version of the site should be triggered before the english version of the site loads.

What is actually happening?

The english version of the site load for a brief moment, then it is switched to the french version. This cause content to "jump" quickly when the domain loads.

[rchl]

I can't reproduce with yarn dev. Please provide a repro on code sandbox if you can reproduce with yarn dev.

Also, check if defaultLocale is correct because it's different than fallbackLocale which I find weird.

[rchl]

BTW. Your previous codesandbox is using an old version of nuxt-i18n (6.13.1) so make sure you update to latest first.
(You can see which version is used in yarn.lock. The codesandbox UI can be a bit confusing.)

[johnboylesingfield]

I made a new codesandbox here and I updated nuxt-i18n to 6.13.1, but I am also unable to reproduce the problem. I am seriously puzzled.

defaultLocale and fallbackLocale seems both fine, as shown by the module's documentation.

[rchl]

You are unable to reproduce the problem? So there is no issue then?

Or do you still see the issue in production? I can believe that since statically generated pages have to assume some locale some there might be a bug there. When using yarn dev there is no static generation going on.

[johnboylesingfield]

I am unable to reproduce the issue in codesandbox, but I am able to reproduce the issue everywhere else (Locally and in production).

The only temporary solution I found was to add strategy: 'prefix' to my configuration file. Since there is a locale for the default too, it can't load anything from the domain.com/ path. However, I see that my images/lazyloader are not loading properly anymore : there is content reflow or "jumping" even though I took steps to make sure that won't happen. When I remove strategy: 'prefix', the images are loading perfectly again, but the textual content is jumping.

As I said, I am able to reproduce the problem locally on a default Nuxt install with no lazyloading. Here is my configuration:

yarn create nuxt-app test

• Programming language: Javascript
• Package manager: Yarn
• UI Framework: Tailwind CSS
• Nuxt.js Modules: Axios
• Testing Framework: None
• Rendering Mode: Universal
• Deployment Target: Static
• Development Tools: jsconfig.json
• Version Control system: Git

i18n: {
    locales: ['fr', 'en'],
    defaultLocale: 'en',
    detectBrowserLanguage: {
      useCookie: false,
      onlyOnRoot: true
    },
    vueI18n: {
      fallbackLocale: 'fr',
      messages: {
        en: {
          s1: 'Hi'
        },
        fr: {
          s1: 'Allô'
        }
      }
    }
  }

The bug is visible when I use yarn dev or yarn build && yarn generate && yarn start.
You can also see the issue on my production site here if you set your browser language to anything except french.

If someone would be kind enough to reproduce these steps locally and tell me whether they see the bug or not, that would be amazing. Thank you.

[rchl]

You can also see the issue on my production site here if you set your browser language to anything except french.

With defaultLocale: en? I find this hard to believe because that means that there will be no redirect even.

[rchl]

I can reproduce with statically generated site (and defaultLocale: fr rather than en like in your example).

I'm not sure if that is fixable though as statically generated site has to use some locale and it uses fr since it's the default one. Then when you load the root page, it loads that one and it happens to be visible for a short time before the browser manages to redirect to the English locale.

[johnboylesingfield]

defaultLocale: 'fr' and fallbackLocale: 'en' are both correct on the same config, as shown in the basic usage of the docs. If I remove defaultLocale, production returns a 404 error. Not good. There is no mention in the docs that defaulLocale should not be used when detectBrowserLanguage is on.

But I get what you are implying.

For example, If defaultLocale: 'fr' is on and the browser is set to english, I would expect that the english version has to be loaded before and without the default version load. But if you say that it is not fixable with static sites, I can believe that.

(thanks a lot)

[rchl]

I just meant that you need the defaultLocale to be different than your default browser locale to reproduce since it reproduces when generated static page has a different locale than user's locale.

We'll keep this open for now. Maybe there is something that can be done but it would probably require some changes in Nuxt itself.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[rchl]

I'm sorry but I can't find any way to fix that. The initial page is loaded and rendered by the browser before I even have a chance to do anything from the module.

If you are really determined you could probably create some custom solution that would hide the page initially and transition it in once it's clear the there will be no redirect (maybe using the https://router.vuejs.org/api/#router-aftereach event listener).