Different domains with multiple languages each #1161

toooni · 2021-04-30T14:59:59Z

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.

The text was updated successfully, but these errors were encountered:

andorfermichael · 2021-05-06T09:51:47Z

I would appreciate that too.

lfglopes · 2021-05-26T19:08:20Z

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

toooni · 2021-06-01T09:20:10Z

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 · 2021-06-08T11:11:00Z

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 · 2021-08-18T02:34:26Z

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 · 2021-10-21T20:02:18Z

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

nikolashaag · 2021-11-12T10:41:52Z

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 · 2021-11-12T11:09:56Z

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

MarcoBomfim · 2022-06-20T16:08:35Z

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 · 2022-06-20T21:03:20Z

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

MarcoBomfim · 2022-06-21T17:39:17Z

@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 · 2022-06-21T21:35:07Z

@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 · 2022-06-22T06:41:14Z

@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 · 2022-06-22T06:52:52Z

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.

MarcoBomfim · 2022-06-23T20:22:03Z

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 · 2022-06-23T20:37:59Z

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.

MarcoBomfim · 2022-06-24T13:17:00Z

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:

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/*)
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 · 2022-11-16T18:37:05Z

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 · 2023-01-30T12:16:31Z

Any updates on this?

Red-Asuka · 2023-04-11T07:46:56Z

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

coeurofbear · 2023-04-26T14:54:22Z

It would be great to have this supported 🙏 !

oneseb · 2023-06-19T12:56:30Z

We'd need exactly that as well!

patricksengalrayan · 2023-07-24T17:58:29Z

This is exactly what I need.

Zavtramen · 2023-08-03T15:08:45Z

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 · 2023-10-04T07:35:44Z

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:

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/*)

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 · 2023-10-04T10:10:21Z

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 · 2023-11-17T10:24:02Z

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:

i18n/src/pages.ts

Line 47 in dd86b7b

return !options.differentDomains && DefaultLocalizeRoutesPrefixable(opts)

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 · 2024-04-10T10:28:43Z

Any updates on this?

toooni · 2024-04-10T11:29:39Z

@DarthGigi This has been implemented in #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 · 2024-04-10T12:48:55Z

@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 · 2024-04-10T14:09:33Z

@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 · 2024-04-10T14:39:40Z

@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 · 2024-04-10T14:44:59Z

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 · 2024-04-10T15:22:17Z

@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:
e-kravtsov@7b96fbc

DarthGigi · 2024-04-11T12:10:49Z

@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 · 2024-04-12T07:12:06Z

I've created a pull request: #2914

DarthGigi · 2024-04-29T09:16:28Z

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 😊

rchl added feature request feature:differentDomains labels May 4, 2021

lfglopes added a commit to visayasolutions/i18n-module that referenced this issue May 26, 2021

different domains AND prefixes. see nuxt-modules#1161

af22fda

stale bot added the stale label Aug 18, 2021

rchl added the pinned 📌 label Aug 18, 2021

stale bot removed the stale label Aug 18, 2021

MarcoBomfim mentioned this issue Jun 20, 2022

[MRR-12461] - Update forked repo from v6 to v7.2.2 IndieCampers/nuxt-i18n#3

Closed

MarcoBomfim mentioned this issue Jun 23, 2022

Feat: allow multiple locales under a single domain #1461

Closed

5 tasks

BobbieGoede added the v7 label Apr 5, 2024

corentinbailly added a commit to D3T-Distribution/i18n that referenced this issue Apr 5, 2024

different domains AND prefixes. see nuxt-modules#1161

249be38

corentinbailly added a commit to D3T-Distribution/i18n that referenced this issue Apr 5, 2024

different domains AND prefixes. see nuxt-modules#1161

3373f21

toooni closed this as completed Apr 10, 2024

toooni reopened this Apr 10, 2024

DarthGigi mentioned this issue Apr 12, 2024

ignore this pull request; see #2914 instead #2906

Closed

DarthGigi linked a pull request Apr 16, 2024 that will close this issue

feat: multiple locales on multiple domains #2914

Open

9 tasks

Different domains with multiple languages each #1161

Different domains with multiple languages each #1161

Comments

toooni commented Apr 30, 2021 • edited

Describe the solution you'd like

Describe alternatives you've considered

andorfermichael commented May 6, 2021

lfglopes commented May 26, 2021 • edited

toooni commented Jun 1, 2021

algj commented Jun 8, 2021

stale bot commented Aug 18, 2021

marcmalerei commented Oct 21, 2021

nikolashaag commented Nov 12, 2021

coeurofbear commented Nov 12, 2021 • edited

MarcoBomfim commented Jun 20, 2022

rchl commented Jun 20, 2022

MarcoBomfim commented Jun 21, 2022

lfglopes commented Jun 21, 2022 • edited

lfglopes commented Jun 22, 2022

rchl commented Jun 22, 2022 • edited

MarcoBomfim commented Jun 23, 2022

rchl commented Jun 23, 2022

MarcoBomfim commented Jun 24, 2022

golubvladimir commented Nov 16, 2022

hoersamu commented Jan 30, 2023

Red-Asuka commented Apr 11, 2023

coeurofbear commented Apr 26, 2023

oneseb commented Jun 19, 2023

patricksengalrayan commented Jul 24, 2023

Zavtramen commented Aug 3, 2023

alisspers commented Oct 4, 2023

rchl commented Oct 4, 2023

bjerggaard commented Nov 17, 2023

DarthGigi commented Apr 10, 2024

toooni commented Apr 10, 2024 • edited

DarthGigi commented Apr 10, 2024

toooni commented Apr 10, 2024

DarthGigi commented Apr 10, 2024

toooni commented Apr 10, 2024

e-kravtsov commented Apr 10, 2024

DarthGigi commented Apr 11, 2024 • edited

DarthGigi commented Apr 12, 2024 • edited

DarthGigi commented Apr 29, 2024 • edited

toooni commented Apr 30, 2021 •

edited

lfglopes commented May 26, 2021 •

edited

coeurofbear commented Nov 12, 2021 •

edited

lfglopes commented Jun 21, 2022 •

edited

rchl commented Jun 22, 2022 •

edited

toooni commented Apr 10, 2024 •

edited

DarthGigi commented Apr 11, 2024 •

edited

DarthGigi commented Apr 12, 2024 •

edited

DarthGigi commented Apr 29, 2024 •

edited