component based translations

[geertolaerts]

Hej,
I was wondering if somebody like component based translations would be possible. What i mean by this is that each component/page would add its own translation, this would keep the separation much cleaner. So each component would do

import english from './en.json'`

and in the component/page

created: function() {
  this.$i18n.add('en', english)
}

I quickly tried this out now, but it seems when you add with the same key, they don't get merged but overwritten.

[tikiatua]

Hi @geertolaerts,

This is a very good idea indeed and not currently possible. We could add a new method this.$i18n.merge('en', english), that would allow merging component based location information. That should actually be not to hard to implement.

[geertolaerts]

cool, i look forward to it.
Not that pressing for me right now, as i am just starting with i18n, but it would be much cleaner i think.

[tikiatua]

There is a new release v1.7.0 that should enable the functionality you requested. We ended up modifying the add method to extend the translations and adding a new method replace, that will replace all existing locale translations (just like add did before).

Please try it out and let me know if it works for you.

[geertolaerts]

Nice,
Works like i expected.
Another suggestion would be namespacing. So you can have your translations like:

{
  "a": "some content"
}

and then this.$i18n.add('en', translations, NAMESPACE) so you can't get clashes. and when using $t('key', NAMESPACE).

[geertolaerts]

only shame is that if you do it in the created it ll do it every time the component is created

[tikiatua]

That is correct. The best way would probably be to have a webpack plugin that would strip out all respective translations and pack them in a single file for fetching. This could be further optimized to create a structure that can easily passed on to translators.

We have already done some thinking in this direction. However, given our current workload, it will probably take some time until we can focus on such advanced features.

[geertolaerts]

yeah,
This is fine for my current needs. Would be worse if i would use rest or something to fetch the translations, then it would be a rest call each time.