Different domains with multiple languages each

[toooni]

I am not a 100% sure if this really isn't possible yet, but it seems like it isn't. We have multiple TLD's and one of them (.ch) needs to have two languages which should result in the following domain/path/locale combinations:

• weekend4two.ch de-CH
• weekend4two.ch/fr fr-CH
• weekend4two.de de-DE
• weekend4two.at de-AT
• weekend4two.fr/fr OR weekend4two.fr fr-FR (We do not really care since the .fr TLD does only need one language)

I've tried a few configs to achieve what I need but had no success. This one was the closest:

/* nuxt.config.js */
...
i18n: {
  differentDomains: true,
  strategy: 'prefix_except_default',
  locales: [
    {
      code: 'de-CH',
      iso: 'de-CH',
      domain: 'weekend4two.ch',
    },
    {
      code: 'fr-CH',
      iso: 'fr-CH',
      domain: 'weekend4two.ch',
    },
    {
      code: 'fr-FR',
      iso: 'fr-FR',
      domain: 'weekend4two.fr',
    },
    {
      code: 'de-DE',
      iso: 'de-DE',
      domain: 'weekend4two.de',
    },
    {
      code: 'de-AT',
      iso: 'de-AT',
      domain: 'weekend4two.at',
    },
  ],
}
...

/* index.vue */
...
<script>
export default {
  nuxtI18n: {
    paths: {
      de: '/',
      fr: '/fr',
      'fr-CH': '/fr',
    },
  },
}
</script>
...

The seems to result in a working solution where all the domains/path exist. But when going to weekend4two.ch/fr, the locale is set to de-CH. Whatever I do, it takes the locale of the first entry with the same domain.

Describe the solution you'd like

It would be cool if the locales config in nuxt.config.js could be extended with a prefix property like this:

/* nuxt.config.js */
locales: [
  {
    code: 'de-CH',
    iso: 'de-CH',
    domain: 'weekend4two.ch',
    prefix: '', /* could be removed too */
  },
  {
    code: 'fr-CH',
    iso: 'fr-CH',
    domain: 'weekend4two.ch',
    prefix: '/fr',
  },
  ...
]

Describe alternatives you've considered

I am open to all alternatives. It may be possible that it even is possible in a way I haven't figured out yet. I am new to NUXT.

[andorfermichael]

I would appreciate that too.

[lfglopes]

Hello all,

I face the same requirement and attempted to forked this repo and add (in a quick and dirty manner) support for this.

See commit https://github.com/visayasolutions/i18n-module/commit/af22fdaebc47c51e7fb0b068f151bbdc1f485d31

If you want to try it out

npm install https://github.com/visayasolutions/i18n-module.git#feature/domains-with-prefix

The configuration I use is the following:

  {
    code: 'nl_BE',
    file: 'nl-BE.js',
    prefix: '/nl',
    domain: 'be.app.local:3003',
  },
  {
    code: 'fr_BE',
    file: 'fr-BE.js',
    prefix: '/fr',
    domain: 'be.app.local:3003'
  }

Haven't tested it extensively, consider it a proof of concept.

I'm open to any feedback, thanks

[toooni]

Hi @lfglopes I've just tried your solution with my desired config and it works perfectly! Since I am not very familiar with nuxt and the other strategies, I am not able to tell from your source if something might be problematic.

[algj]

This is a lot to write when there's a lot of domains (6) and couple of languages (4), in total 24 "locales". There should be a better solution maybe, like seperate section for domains and defaultLocale for each of them.

[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.

[marcmalerei]

I face the same requirements. Would be great if the solution provide by @lfglopes could be merged.

[nikolashaag]

I have the same requirements for a page that has multiple locales on each domain. This seems like a common usecase, so would be great if this can get merged!

[coeurofbear]

Same here, it'd be great if this gets merged! 🤞

[mbomfim33]

Our company has been using a forked version of the plugin for quite some time now due to this issue being staled, it would be cool to have it merged. Is there something I can do to get this moving forward?

[rchl]

I don't see any PR that could be merged.

[mbomfim33]

@lfglopes think you can get a PR open with your changes? If not I can raise one, just don't want to take your credits for it 😄

[lfglopes]

@MarcoBomfim thanks for reaching out!

I didn't open a PR back then because I assumed the code was not good enough as it is.

Which after reading the contributing guidelines and running lint on it, I can confirm :P

I can attempt some changes tomorrow and see if it works out. I'd assume one might need to update docs as well? Something else?

[lfglopes]

@MarcoBomfim please go ahead and submit a PR :)

I haven't used nuxt for a little while and I need more time than I can afford right now to fix the code.

[rchl]

I don't want to discourage anyone but a certain level of quality is required for a PR to be accepted. The change should have tests, be added to documentation if it's a feature or behavior change, pass the lint checks and in general fit the design of the module. The last one is a bit hard to quantify so it could be discussed before the PR to avoid wasting anyone's time.

[mbomfim33]

Thanks folks. I'll be working on the PR mentioned above, but it may take some time since I'm slowly getting the hang of how everything works. @rchl should I move any further discussion to the PR instead?

[rchl]

The high level design of the change could be discussed before PR to avoid wasting time on implementation that would potentially be rejected but it's up to you.

[mbomfim33]

My initial idea was to create a new strategy, and follow the logic for PREFIX_AND_DEFAULT under @/src/helpers/routes.js. Something like DOMAINS_AND_PREFIX or MULTIPLE_LOCALES_SINGLE_DOMAIN.

Assuming the following configuration:

i18n {
    baseUrl: 'nuxt-app.localhost',
    strategy: 'multiple_locales_single_domain',
    defaultLocale: 'en-ca',
    locales: [
      {
        code: 'en',
        iso: 'en',
        name: 'English',
        domain: 'en.nuxt-app.localhost'
      },
      {
        code: 'en-ca',
        iso: 'en-CA',
        name: 'Canadian English',
        domain: 'ca.nuxt-app.localhost',
        suffix: '/en'                                     // Required for multiple languages per domain
      },
      {
        code: 'fr-CA',
        iso: 'fr-CA',
        name: 'Canada Français',
        domain: 'ca.nuxt-app.localhost',
        suffix: '/fr'
      }
    ],
    ...
}

What needs to happen then, is that to build the localizedRoute, we would have to verify a couple of things:

1. The route belongs to defaultLocale and is the defaultLanguage? If so, don't add anything to the route (ie. ca.nuxt-app.localhost/*). If not, we would have to include a suffix for the language (ie. ca.nuxt-app.localhost/fr/*)

2. The route belongs to a different domain? If it does, the route should be built using the proper domain name. (ie en.localhost/* instead of ca.nuxt-app.localhost/en/*)

As far as I've seen walking around the module this seems to cover enough ground for a multi-lang per domain feature to be implemented. Although I have a couple of questions still:

• Is there anything I'm missing here?
• Does this follows the module design? Is there anything I could change here in order to be in accordance with it?

[golubvladimir]

What about my path for fix this problem - https://github.com/golubvladimir/nuxt-i18n-different-domains-and-prefixes , I use https://github.com/nuxt-community/router-module for creating custom Nuxt router.

[hoersamu]

Any updates on this?

[Red-Asuka]

This seems to be a common use case, and it would be great if it could be supported.

[coeurofbear]

It would be great to have this supported 🙏 !

[oneseb]

We'd need exactly that as well!

[patricksengalrayan]

This is exactly what I need.

[Zavtramen]

Hello all,

I face the same requirement and attempted to forked this repo and add (in a quick and dirty manner) support for this.

See commit visayasolutions@af22fda

If you want to try it out

npm install https://github.com/visayasolutions/i18n-module.git#feature/domains-with-prefix

The configuration I use is the following:

  {
    code: 'nl_BE',
    file: 'nl-BE.js',
    prefix: '/nl',
    domain: 'be.app.local:3003',
  },
  {
    code: 'fr_BE',
    file: 'fr-BE.js',
    prefix: '/fr',
    domain: 'be.app.local:3003'
  }

Haven't tested it extensively, consider it a proof of concept.

I'm open to any feedback, thanks

Thanks a lot. It helps me! Please, keep alive https://github.com/visayasolutions/i18n-module.git#feature/domains-with-prefix

[alisspers]

My initial idea was to create a new strategy, and follow the logic for PREFIX_AND_DEFAULT under @/src/helpers/routes.js. Something like DOMAINS_AND_PREFIX or MULTIPLE_LOCALES_SINGLE_DOMAIN.

Assuming the following configuration:

i18n {
    baseUrl: 'nuxt-app.localhost',
    strategy: 'multiple_locales_single_domain',
    defaultLocale: 'en-ca',
    locales: [
      {
        code: 'en',
        iso: 'en',
        name: 'English',
        domain: 'en.nuxt-app.localhost'
      },
      {
        code: 'en-ca',
        iso: 'en-CA',
        name: 'Canadian English',
        domain: 'ca.nuxt-app.localhost',
        suffix: '/en'                                     // Required for multiple languages per domain
      },
      {
        code: 'fr-CA',
        iso: 'fr-CA',
        name: 'Canada Français',
        domain: 'ca.nuxt-app.localhost',
        suffix: '/fr'
      }
    ],
    ...
}

What needs to happen then, is that to build the localizedRoute, we would have to verify a couple of things:

1. The route belongs to defaultLocale and is the defaultLanguage? If so, don't add anything to the route (ie. ca.nuxt-app.localhost/*). If not, we would have to include a suffix for the language (ie. ca.nuxt-app.localhost/fr/*)
2. The route belongs to a different domain? If it does, the route should be built using the proper domain name. (ie en.localhost/* instead of ca.nuxt-app.localhost/en/*)

As far as I've seen walking around the module this seems to cover enough ground for a multi-lang per domain feature to be implemented. Although I have a couple of questions still:

• Is there anything I'm missing here?
• Does this follows the module design? Is there anything I could change here in order to be in accordance with it?

@rchl Did you have any input on the solution proposal from @MarcoBomfim ?

[rchl]

I don't have time to work on new features like that. The bulk of the effort (not from me) goes into the Nuxt 3 version right now.

[bjerggaard]

I am in a need for similar feature and couldn't find any up-to-date workaround so thought I would have a go for it myself. My suggested implementation only requires setting a domainDefault: true on the default/fallback locale for each domain when using multiple domains and multiple languages on one or more of them.

It should support the various strategies except no_prefix as that does not make any sense. You can see the changes in this commit: bjerggaard/nuxt-i18n@d610dd6 Let me know of any feedback/improvements and I will be happy to create a pull request.

This feature did break some of the differentDomains tests and I couldn't get my head around the reason for following line in the current code: https://github.com/nuxt-modules/i18n/blob/dd86b7bbb50d0c45e256033f21c29548a073362a/src/pages.ts#L47 For me, it looks like no_prefix is implied when using differentDomains in the current codebase. Setting the no_prefix strategy in those tests did resolve them.

Also posted this in following issue: https://volta.net/nuxt-modules/i18n/issues/2418

[DarthGigi]

Any updates on this?

[toooni]

@DarthGigi This has been implemented in https://github.com/nuxt-modules/i18n/pull/2705. The release is out since last week.

I tried to migrate from our manual solution, and I am still having some use cases which I can't implement with this - so I haven't tested it properly.

[DarthGigi]

@toooni Thank you for your response, however, it doesn't quite fit our use case.

We are looking for something that works as follows:

If something like this is our config:

export default defineNuxtConfig({
  // ...
  i18n: {
    locales: [
      {
        code: 'en',
      },
      {
        code: 'nl',
        domain: 'mydomain.nl',
        domainDefault: true
      },
      {
        code: 'be',
        domain: 'mydomain.be',
        domainDefault: true
      },
      {
        code: 'de',
        domain: 'mydomain.de',
        domainDefault: true
      },
      {
        code: 'fr',
        domain: 'mydomain.fr',
        domainDefault: true
      }
    ],
    strategy: 'prefix_except_default',
    differentDomains: true
  },
  // ...
})

We would like to achieve the following result:

NL domain:
https://mydomain.nl/ -> https://mydomain.nl/ (nl language)
https://mydomain.nl/en -> https://mydomain.nl/en (en language)
https://mydomain.nl/de -> https://mydomain.nl/de (de language)

https://mydomain.nl/nl -> https://mydomain.nl/nl (404)

DE domain:
https://mydomain.de/ -> https://mydomain.nl/ (nl language)
https://mydomain.de/en -> https://mydomain.nl/en (en language)
https://mydomain.de/nl -> https://mydomain.nl/de (de language)

https://mydomain.de/de -> https://mydomain.de/de (404)

etc...

Do you have an idea on how we can achieve this behavior? We tried setting an unique code for each domain locale:

{
  code: 'de-fr',
  domain: 'mydomain.de',
  domainDefault: false
},
{
  code: 'fr-de',
  domain: 'mydomain.fr',
  domainDefault: false
}

But that results in paths like domain/de-fr/page which isn't what we want.

Any help would be appreciated 😊.

[toooni]

@DarthGigi You are right. And this was exactly what I meant by

I am still having some use cases which I can't implement with this - so I haven't tested it properly

I will reopen the issue.

I also have use cases where I want to overwrite the prefix inside page components like this:

<script setup>
  defineI18nRoute({
    paths: {
      de: '/entdecken',
      fr: '/decouvrir', // -> this is without prefix
    }
  })
</script>

When we started, I was fairly new to nuxt. I am now pretty content that I might be able to contribute here. But I am not having much time right now. If you want, I could maybe provide you the files plugin we wrote to achieve a working solution without this module in www.weekend4two.ch. It's not very sexy, but it works.

[DarthGigi]

@toooni Thanks for reopening this issue!

The plugin files would be great to have for the time being.

Maybe an idea is to make the following config possible:

    locales : [
      {
        code : 'nl',
        domains : [ 'mydomain.nl', 'mydomain.be', 'mydomain.de', 'mydomain.fr' ],
        defaultDomain : 'mydomain.nl'
      },
      {
        code : 'be',
        domains : [ 'mydomain.nl', 'mydomain.be', 'mydomain.de', 'mydomain.fr' ],
        defaultDomain : 'mydomain.be'
      },
      {
        code : 'en',
        domains : [ 'mydomain.nl', 'mydomain.be', 'mydomain.de', 'mydomain.fr' ],
      },
    ]

[toooni]

I've created a public repo: https://github.com/toooni/nuxt-i18n-poc. It might be easier for you to adapt a similar solution for now and move further if this module is ready for our use cases. If you have question, you can @ me inside the repository, so we do not spam this issue anymore.

[e-kravtsov]

@DarthGigi, I have this config in my implementation, I've made patch for version 8.20 a few weeks ago. Maybe it will help as a starting point: https://github.com/e-kravtsov/nuxt-i18n-domain/commit/7b96fbc24935a207a93999208b0cdb8eb22665ae

[DarthGigi]

@e-kravtsov I've forked the official repo and added the changes found in your commit. After some internal testing, it works perfectly for us, just how I described our use case above.

If wanted, I could make a pull request for it to be included in the official package.

[DarthGigi]

I've created a pull request: https://github.com/nuxt-modules/i18n/pull/2914

[DarthGigi]

I've created a pull request: #2914

I think I've added everything to the pull request. The logic, documentation and tests have been added, all tests pass as well. So for those who (really) need it, you can give it a try 😊