Internationalization (i18n)
Locales
Karrot is available in different languages. So, instead of adding English text directly to a component's source file, we add a key instead. This key points to a text in each of the locale files.
All locale files can be found under src/locales/
. For example the Spanish locale file is located at src/locales/locale-es.json
.
Instead of
html
<ChangePhoto
...
:label="Group logo"
:hint="Click to upload your group logo!"
...
/>
we write
html
<ChangePhoto ... :label="$t('GROUP.LOGO')" :hint="$t('GROUP.SET_LOGO')" ... />
$t(...)
is a function provided by vue-i18n which does all the lookup magic.
Adding new text to locales
- Add a new key-value pair to
src/locales/locale-en.json
- As a convention keys are CAPITALIZED.
- Keys can be nested for better structure.
- Do not add the key to the other locale-*.json files. They will be added automatically by the CI tool after merge to master and translated by transifex.
Adding new locales
Hey stranger
Do you know how to add new locales? Improve this documentation by answering this question.