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 these two approaches. Instead, we’ll implement a global mixin.

As we’ve learned already, a mixin is a renderless component with some functionality that can be offered to every component applying the mixin. The most basic renderless component we can create is an empty object. We use the mixins option in a component to apply a mixin.

Global mixins work a bit differently. First, they add functionality to every component the app uses—we don’t need to apply them explicitly. Second, when paired with ref, they allow us to share states between components. We can define a global mixin as illustrated below: