WealthBar i18n Tools

These tools have been designed specifically for the WealthBar team to translate VueJS apps using gettext and the Transifex service. If you feel they are useful to you or your project feel free to use them.

i18n Translating an App

0. Add the i18nMixin to your component

You must explictly add i18n directives and functions using a mixin. This is done globally by adding;

import { i18nMixin } from '@wealthbar/i18n'

Vue.mixin(i18nMixin)

But it can also be loaded locally in any directive if global behaviour is not desired.

1. Mark text strings for translation

In Vue component templates you can use the v-translate or v-t directive.

<p v-translate>Translate this content.</p>
<p v-t="['this', 'message']">Translate %1 %2</p>
<p v-t context="imperative">Translate</p>

You can supply arguments to replace ordered labels in the string to the directive as a binding value. Adding a context attribute will set a context for a particular string so that it can be translated multiple ways depending on the context of usage.

It is also important to escape reserved HTML entities like <, > and & as <, > and & to avoid a mismatch when translating.

<span v-t>5 &gt; 3 &amp; 6 &lt; 7</span>

It is ok to include HTML elements in translated strings, but they must not include VueJS components, directives or bindings. Otherwise the translated content will change and the translation will not longer match.

<p v-t>
  <span>This is a description of</span>
  <a href="https://somewhere.example">a link</a>
  <span>to some content.</span>
</p>

In Vue component code use the this.$t to translate strings in code within Vue components.

computed: {
  message() { this.$t('translate this message'); }
}

It is possible to substitute arguments by supplying them as a second argument.

computed: {
  message() { this.$t('translate %1 %2', ['this', 'message']); }
}

Finally you can supply a context as the third argument.

computed: {
  message() { this.$t('translate %1 %2', ['this', 'message'], 'imperative'); }
}

Anywhere else it is possible to just import the translate function from the package.

import { translate as $t } from '@wealthbar/i18n`;

It is important to name the function $t if you want to use the i18nextract script to automtically find and extract translatable strings.

2. Extract strings for translation

yarn i18nextract src/

This will scan .vue and .js files and extract strings for translation to i18n/messages.pot

3. Submit string to Transifex for translations

Install Transifex Client

https://docs.transifex.com/client/installing-the-client

After installing you will want to initialize using tx init which will require you to provide an API key for your transifex account.

Push translations to Transifiex

tx push --source

Translate new and changed strings

These can be submitted to a translation service via the Transifex UI.

Pull translated strings

tx pull -f

Check in translation

Finally check in the translations and deploy.