@wealthbar/i18n

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>

HTML tags should not be included in translated content, as they will be scaped by the translation function. In cases like this it is recommended to break up the content:

<p>
<span v-translate>This is a description of</span>
<a v-translate>a link</a>
<span v-translate>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'); }
}

Anywhere else it is possible to just import the translate function

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

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.