Comments (16)
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 :)
from i18n.
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.
from i18n.
@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.
from i18n.
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! :)
from i18n.
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 :)
from i18n.
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
from i18n.
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 :)
from i18n.
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
from i18n.
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?
from i18n.
Ah, then it's great, it's exactly the same I did. Perfect! Thank you very much!
from i18n.
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>
from i18n.
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?
from i18n.
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?
from i18n.
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
from i18n.
Closing this for now, will have to double check this in upcoming release #72
from i18n.
This feature-request has been implemented by @paulgv in release v2.9.0.
from i18n.
Related Issues (20)
- page alias no have prefix
- Can not use custom path with i18n in nuxt.config.ts HOT 2
- docs: Add note/link about i18n-t,… on components api page HOT 1
- Mobile adaptation problem of nuxt/i18n in nuxt3 HOT 1
- I18n configured the pages option and set customRoutes to true. The file path is also present, but the terminal reported an error stating that the route does not exist HOT 2
- Regression: Retrieve object nodes HOT 1
- how can I support returning objects or arrays from the language file? HOT 1
- Content with github source driver HOT 1
- useLocalePath() and then <NuxtLinkLocale> wrongly encoding paths for some uris HOT 1
- Can't match types i18n nuxt.config.ts
- useCookieLocale() does not work in server context (SSR)
- useRoute('login') does not work, it expects useRoute('login__LOCALE') HOT 6
- When override locales from Layer, I get an error: When using the langDir option the locales must be a list of objects. How to override Layer configuration from project layer? HOT 3
- Multi-Domain Website configuration with partial shared domains
- Cannot set headers after they are sent to the client - i18n cookie + redirect from auth middleware HOT 1
- Locale is back to default upon navigating HOT 1
- [BUG?]: Locale resolver scans `srcDir` instead of `rootDir` HOT 2
- detectBrowserLanguage does not work in production HOT 3
- undefined title in google SERP? HOT 4
- Unexpected token 'pages' HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from i18n.