DifferentDomains doesnt work with vuex enabled?

[nickycdk]

I cant quite figure how to get the differentDomains option to work with the vuex option enabled?

I currently have these locales:

differentDomains: true,
    detectBrowserLanguage: false,
    defaultLocale: 'en',
    locales: [
      {
        code: 'en',
        domain: localeDomains.en,
        iso: 'en',
        name: 'English'
      },
      {
        code: 'da',
        domain: localeDomains.da,
        iso: 'da',
        name: 'Danish'
      }
    ],
    vueI18n: {
      fallbackLocale: 'en',
      messages: {
        en: {
          welcome: 'Welcome'
        },
        da: {
          welcome: 'Velkommen'
        }
      }
    }

And I also have vuex enabled:

vuex: {
          moduleName: 'i18n',
          syncLocale: true,
          syncMessages: false,
          syncRouteParams: false
}

However, when I then want to output {{ $t('welcome') }} in my template it outputs the english locale, even though im using my DK domain... If I set syncLocale: false, it works as expected and I get the danish text...

Seems like a bug?

The reason i want to have the current locale in vuex, in because I need to use it in my asyncData() when fetching data from the server, eg:

try { const pageData = await client.getEntry('32zRP0wQfSKwMK3D650D6a', { locale: CURRENT_LOCALE }) }

And it doesnt seem like I can use

async asyncData(ctx) { console.log('app', ctx.app.i18n.locale); }

as this always returns my default language, regardless the domainname, it however does return correct after HMR reload, but never the first time I enter a specific domain, eg: my danish domain
Correction: It's like it's flashing, starting out on the english languange, and then switches to the danish language after X milliseconds....

Am i doing something wrong, or is there another way to get around this, so I can use the current locale in the asyncData() ?

[rchl]

There is a #831 bug that causes such behavior when domain contains a port. Is that the case for you?

[nickycdk]

Ah, yeah, seems like it's more or less the same.... However, I still experience this on a server though (without the port in the URL)...

If I in my component try logging the context.app.118n.locale, it's still english, even though in accessing my danish url - But still, after X ms it switches to the correct locale, but again, the "redirect/update" is a problem, as it wont generate static pages for each language ? I need to get data from an external api (Contentful), based on the correct locale....

async asyncData(context) {
      console.log(context.app.i18n.locale); //Always returns the default locale when runnng nuxt generate, when served from the server it updates to the correct locale after X ms ? 
}

And doing this:

const pageData = await client.getEntry('32zRP0wQfSKwMK3D650D6a', {locale: context.app.i18n.locale})
will result in it always choosing my default locale, which means I cant get the correct content from the CMS ?

https://imgur.com/a/p8T8mgK - Here you can see it has chosen the 'da' locale, but it still shows the english text, because on nuxt generate, the asyncData() and context.app.i18n.locale is english, until X ms after the page in loaded - Again, which means im not getting the correct content from the CMS

It works perfectly if I output a string from my local JSON translation file (eg: {{ $t('welcome') }}), so it seems the main issue is when fetching data from an external source, such as a CMS system

Isn't the point with differentDomains, that one would be able to fetch content from a server based on the current locale? It seems like it's only working for local content is JSON files, which imho, isn't quite useful, as one would ofter have the content coming from a server where we need the content to be SSR rendered in the generated static files.... Or.... Maybe im just doing it all wrong ;)

[rchl]

If you are loading your app with non-default port then it's the #831 issue. It will fail to detect locale properly either on the server or the client, depending on which one matches your locale configuration.

[nickycdk]

Im not, or at least i dont think i am.... I haven't specified anywhere that it should run on a specific port, which means it must/should use the default port (3000)... ? Either way, im experiencing this issue on both my local domains, and when i've deployed the static site to Netlify....

[nickycdk]

Update: Strangely enough, if I convert the whole thing to not use asyncData, but fetch() instead, it seems to work correctly?

[rchl]

If you are loading the same page using URLs both with and without port then one of them will not match your configured locale domain. This is the current bug. That means that you'll get an issue with either server-side or client-side page having the wrong locale.

On the client fetch runs after the middleware has run so I guess the locale is already corrected by then.

BTW. I have just fixed #831 and will release it soon.

[nickycdk]

Im not loading any of the URL's on the server with a port... And im referring to the domains it is on the actual server (Without a port defined)

Sounds great - Let me know when you release it, and i'll test it out and see if that fixes my issue

[nickycdk]

Ok, just tested a bit more with asyncData, using release: "nuxt-i18n": "^6.14.2"

To see it all in action, i've setup the example so you can see it:

https://enversiontesting-en.netlify.app/ - Should return the English Content, but returns the danish content even though the locale is 'en'

https://enversiontesting.netlify.app/ - Should return the danish content which it does....

Again, I believe the problem is when using async asyncData ( context ) {} as described in the examples - In asyncData, it just doesnt get the right locale :(

[rchl]

You haven't mentioned that you are generating your pages (nuxt generate) and since you are using Netlify then I guess you do.
That can be the problem.

By "problem" I mean either a bug in the module or something that would be hard to handle properly for a static, server-rendered page. I would have to have a closer look when I have more time.

[nickycdk]

Okay - If I were to do it differently, what would you suggest?
When having a static application, wouldn't it always be the prefered way, using nuxt generate (For SSR purposes)?

Alternately, I would need to have 2 almost exact codebases, just representing to different languages, which seems a but verbose...

[rchl]

I don't have a better suggestion right now. Running on a node server would work. ;)

BTW. What do you have set target to in your nuxt.config?

[nickycdk]

Alright, might try looking into this...

I have target: 'static',

[rchl]

Honestly, I don't think differentDomains is compatible with static (nuxt generate) mode. The generated pages would have to be specific to the domain they are opened on and it's not the case currently as there is only one page that gets generated (in default locale).

[nickycdk]

Yeah thought so.... Anyway, I found a workaround...

Solution i ended up doing was defining the locale in a env variable.... then I could get the variable in the asyncData()
testet out by doing APP_LOCALE=en-US npm run build && APP_LOCALE=en-US nuxt generate

So all in all, i can build this into a build script, and deploy on different locations, by still using same codebase...

Works as a charm...

[rchl]

So you are gonna build for each domain separately?

[nickycdk]

Yup - So in my build script (in Azure) - I start out by building one language, then deploy it somewhere, after deploy I do the same for the second language, all in using the same repo/codebase luckily...

[stale]

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.

[divine]

This should be fixed since vuex doesn't hold that information anymore.

cc @rchl

[rchl]

Yeah, I guess so.
A little unclear if something could be done here to avoid having to generate multiple times but probably not.