Vue-i18n: [Feature Request] i18n.te doesnt look for global locales

Created on 28 Mar 2019  路  6Comments  路  Source: kazupon/vue-i18n

Not sure if this a bug or a feature, but when I'm trying to check if global translation exists, te returns false for all translations, except component level locales.

Given global locale file en.yaml:

en:
  hello: 'Hello'

i18n.te('hello') returns false

In case I have hello tranlsation defined inside my component, it returns true as expected.

I've tried to check source code, and it seems te doesnt look for global locales intentionally.

Could you please confirm this, or should this be treated as a bug?

Proposal

Most helpful comment

I can describe you my use case for this feature:

Sometimes backend returns list of error codes. On the UI side we try to translate them, and we do this dynamically. Because of big amount of different words to be translated we do this dynamically (translation lookup based on error code received from backend, like company.name), checking if error code exists in global locales. If it's absent, we display general error message. Otherwise, error code translated, and human readable message is shown.

All 6 comments

That's not bug.
But it's might be improved.

I personally think that te is not necessary. Because, we ship the application after we will test whether there is a translation missing.
In the future, I'll plan to remove the te from vue-i18n.

I can describe you my use case for this feature:

Sometimes backend returns list of error codes. On the UI side we try to translate them, and we do this dynamically. Because of big amount of different words to be translated we do this dynamically (translation lookup based on error code received from backend, like company.name), checking if error code exists in global locales. If it's absent, we display general error message. Otherwise, error code translated, and human readable message is shown.

+1 for me, simmilar situation with dynamic translation of strings

+1 same use case as @vladra

+1 same as @vladra

@vladra

You could use this approach:

const errorCode = '404' // some error code
const path = `$dynamic.error.${errorCode}.text`
const locale = this.$i18n.locale

this.$root.$options.i18n.te(path, locale)

Obviously this will only work if it is a global path.

Another use case:

We have generic components that get configured by users in deployment. For that we use a config file, that is defining routes, title and more.

In this config file users can provide a title property for every route. This prop can be a LocaleMessageObject or a string. Objects are merged into the global locale-messages via i18n.mergeLocaleMessage with an auto generated path.

The title (document.title and toolbar-title) are calculated in a computed property. If the paths exists we output the localized title, otherwise the string (or nothing at all if its not a string or empty). For checking the existence of the path we use the te method.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

Brotzka picture Brotzka  路  4Comments

dunz picture dunz  路  5Comments

forddyce picture forddyce  路  5Comments

karol-f picture karol-f  路  3Comments

lucianobosco picture lucianobosco  路  4Comments