Is it possible to make the module work with different domains?

[nuxt-modules]

Is it possible to make the module work with different domains?

[Guito]

Well, I have been checking the module and it's currently not possible. I have managed to do it changing some parts of the code. It can have a lot of improvements, but it works:

My definition of locale now includes a domain and I stored them in env:

env: {
 locales: [
    {
        code: 'en',
        name: 'ENGLISH',
        domain: process.env.DOMAIN_EN || 'mydomain.com'
    }
 ]
}

In routes.js deleted the code changing the path to include the language
path = /${code}${path}``

In my store I added the current locale:
state: locale: 'en'
and inited it with nuxtServerInit:

actions...
    nuxtServerInit({commit}, {req}) {
        const foundLocale = process.env.locales.find(l => req.headers.host.indexOf(l.domain) !== -1)
        commit('SET_LOCALE', foundLocale ? foundLocale.code : 'en')
    }

mutations...
    SET_LOCALE(state, locale) {
        state.locale = locale
    }

in i18n.routing.plugin.js I changed switchLocalePath to use the domain:

        switchLocalePath (locale) {
            const name = this.getRouteBaseName()
            if (!name) {
                return ''
            }
            const baseRoute = Object.assign({}, this.$route, { name })
            return this.$i18n.locales.find(l => l.code === locale).domain + this.localePath(baseRoute, locale)
        }

And in i18n.plugin.js and i18n.routing.middleware changed the defaultLocale to be store.state.locale

Maybe I forgot something, but it's roughly that :)

[paulgv]

To test this locally, I added entries that point to 127.0.0.1 to my /etc/hosts:

nuxti18n.localhost    127.0.0.1
en.nuxti18n.localhost 127.0.0.1

I specified those hosts in the config (I had to specify the port as well):

locales: [
  {
    code: 'en',
    iso: 'en-CA',
    name: 'English',
    langFile: 'en-CA.js',
    domain: 'en.nuxti18n.localhost:8080',
  },
  {
    code: 'fr',
    iso: 'fr-CA',
    name: 'Français',
    langFile: 'fr-CA.js',
    domain: 'nuxti18n.localhost:8080',
  },
],

It does check the whole domain name, not only the extension.
When differentDomains is enabled, there is no prefix added to the paths, the localization is based solely on the domain name.
I've been testing this with the lazy-load feature and it seems to play pretty nicely, that should address your concerns about serving only the required translations.
There should be a way of managing different environments too, so you can use local local hosts in dev and real domain names when the app goes live.

[paulgv]

@Guito I've started implementing the option in a new branch: https://github.com/nuxt-community/nuxt-i18n/tree/feature/different-domains
I've used the domain key in the locales array like you did yourself to define the different domains.
To enable the feature, option differentDomains must be set to true.
Hopefully you can give this a try sometime :) Thanks again for sharing your take on this, it's been really useful.

[paulgv]

Hi @Guito !
This is awesome, thanks for sharing this! I'd love to integrate your solution as an option in the module, hopefully I can give it a go next week. Feel free to open a PR with your changes, we could work on it together to turn it into a built-in option!

Thanks! :)

[Guito]

Sure! I can do a PR, however, I think it will need a lot of ifs and some extra config that the plugin is not currently using. Tomorrow I will give it a try :)

[Guito]

I think I don't have enough vue/nuxt knowledge yet to do it as a plugin, that's why I have not done any pr yet. If you want we can meet to do it together

[paulgv]

Hi @Guito !
Unfortunately I lacked time to work on this feature lately. I might be able to give it a go in the next few days, I'd be happy to involve you in the development if you're up to :)

[Guito]

That would be great. Something we would have to think is how to only include the language required in each domain to improve the performance

[Guito]

I've been checking the code and it looks nice! I didn't know how to do the part in which you check the ssr or the client and I did it with the store. I'll try it this week.

A couple of questions/concerns:
How to try it in local? I checked the full URL instead of just the .com because of this (If I'm not wrong you checked only the .com)
If it's not the default locale, are the urls myhost.de/de/some-url or myhost.de/some-url? It should be the second one in my opinion.
Do you know any way of just packaging the required language or guide me where I can investigate it?

[Guito]

Ah, then it's great, it's exactly the same I did. Perfect! Thank you very much!

[Guito]

Hello @paulgv

I've testing it and the only thing that is not working for me is creating a link with the switch locale method in a domain which is not the default:

The client-side rendered virtual DOM tree is not matching server-rendered content. This is likely caused by incorrect HTML markup, for example nesting block-level elements inside < p >, or missing < tbody >. Bailing hydration and performing full client-side render.

I think the problem is because of the port, because I have a private domain in which I display a non default language and it works.

    {
        code: 'en',
        iso: 'en',
        name: 'ENGLISH',
        langFile: 'en.json',
        domain: en.localhost:8080 // working because it's the default
    },
    {
        code: 'es',
        iso: 'es',
        name: 'ESPAÑOL',
        langFile: 'es.json',
        domain: my-private-domain.org  // working
    },
    {
        code: 'it',
        iso: 'it',
        name: 'ITALIANO',
        langFile: 'it.json',
        domain: it.localhost:8082   // Not working
    },

Code not working:

                                <a v-for="(locale, index) in $i18n.locales"
                                   v-if="locale.code !== $i18n.locale"
                                   :key="index"
                                   :href="switchLocalePath(locale.code)">{{ locale.name }}
                                </a>

[paulgv]

Hey @Guito I ended up releasing the feature in v2.9.0 but I hadn't noticed your comment.
I'm not sure what might be the issue with the port, is your app running on multiple ports at a time?

[Guito]

Hi @paulgv

I've been trying with the new release and the problem still persists. My application runs on the port 3000 but I have an nginx redirecting the traffic to the different ports.

My config:

            defaultLocale: 'en',
            noPrefixDefaultLocale: true,
            differentDomains: true,
            loadLanguagesAsync: true,

       .............

            vueI18n: {
                fallbackLocale: 'en',
                messages: {
                    en: {...require('./locales/en.json'), ...require('./locales/another-en.json')},
                    es: {...require('./locales/es.json'), ...require('./locales/another-es.json')},
                    ....
                }
            }

And I have checked the languages splitted by domain and they are splitted correctly, but also added to the app.js. I guess I need to do something else so they don't get added in both places?

[Guito]

Ok, the problem was the if. This is not working:

<a v-for="(locale, index) in $i18n.locales"
           v-if="locale.code !== $i18n.locale"
          :key="index"
          :href="switchLocalePath(locale.code)">{{ locale.name }}
</a>

This is working:

 <a v-for="locale in $i18n.locales"
             v-show="locale.code !== $i18n.locale"
            :href="switchLocalePath(locale.code)">{{ locale.name }}
  </a>

There is something wrong somewhere because if I do this:

 <a v-for="locale in $i18n.locales.filter(l => l.code !== $i18n.locale)"
            :href="switchLocalePath(locale.code)">{{ locale.name }}
  </a>

The urls get mixed, so for example, I get locale.name = SPANISH and the url links to EN site even if the locale.code is ES

[paulgv]

Closing this for now, will have to double check this in upcoming release #72

This feature-request has been implemented by @paulgv in release v2.9.0.