UI Translations
Explore how to implement UI translations in VueJS applications by using global mixins and reactive variables. Understand the technical steps to manage string translations, create a language switcher, and ensure translations update across components. Discover best practices for translation keys and how to maintain flexibility in multilingual Vue apps.
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 ...