UI Translations

Most modern web apps with an international audience need to have localized UIs. The most important part of this is string translations. Once we have implemented a second UI language, we can usually add more languages without much technical effort.

We won’t use different languages in code examples in this lesson, but instead, we’ll use an all-uppercase and all-lowercase version of English. This way, the change is visible but still understandable for everyone. The focus of this lesson is on the technical aspects and not the linguistic ones.

Implementing translations as a global mixin

To implement UI translations, we need a way to know which string we need in which language. Furthermore, since every Vue component most likely needs translations in some form or another, we need this approach to be a global one. There are several approaches to global code in Vue—global mixins, state machines (such as Vuex), or a custom plugin. We won’t cover creating a translation interface with ...