Orbitype: Seamless Internationalization with Multi-Language Support (Full Transcript)

Speaker 1: Orbitype is first-class support for internationalized content. This colors table includes a name field that saves different variants for different languages. If multi-line content is detected, Orbitype automatically displays a language switcher, allowing you to choose which variant to display. The edit view shows a similar language switcher, which allows you to change which variant you want to edit, making translation work easy. But how does this work? Let's take a look at the code. Multi-line fields are to be saved as objects instead of simple strings. The keys of such a multi-line field should be ESO standard language codes, and the values should be the variants for this language. In this example, we have the English variant green, the German variant grün, and the French variant vert. Let's look at how to use such multi-line content in your frontend. I've prepared a simple example that simply lists all these colors. Let's look at how to extract the current language version. I will show you how to do this using the Nuxt framework, but the general idea is the same even if you use another technology. To get started, let's create a useTranslateComposable to make this easily usable in different components. useTranslateComposable uses the standard internationalization library of Nuxt to extract the current local value. Let's start by getting the current local, and then return a function that can extract this variant from a text. So something like this. And you might as well add a fallback to a default language. Okay, with this composable ready, we can use it in each component that needs to display multi-line content. Let's create a t function with this composable, and wrap each value that is multi-line in this t function. After refresh, you see that now we display the current language, which by default is English, showing us red, blue, and green. To finish up, let's build a simple language switcher. Again, we will use the built-in features of Nuxt, and get the current language as well as the available ones. Then let's display a list of buttons for language switching, something kind of like this. V4L of available locals, and on click, we will change the current local. Let's give it some padding, and display each entry in uppercase letters. Okay, there we go. And now, when we click on one of these buttons, we change the current language of the app, and the GUI automatically re-renders using our t function.