Orbitype: Seamless Internationalization with Multi-Language Support
Learn how Orbitype simplifies internationalized content with automatic language switchers and easy translation management using the Nuxt framework.
File
Nuxt i18n and a Headless CMS - Easy Example
Added on 09/27/2024
Speakers
add Add new speaker

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.

ai AI Insights
Summary

Generate a brief summary highlighting the main points of the transcript.

Generate
Title

Generate a concise and relevant title for the transcript based on the main themes and content discussed.

Generate
Keywords

Identify and highlight the key words or phrases most relevant to the content of the transcript.

Generate
Enter your query
Sentiments

Analyze the emotional tone of the transcript to determine whether the sentiment is positive, negative, or neutral.

Generate
Quizzes

Create interactive quizzes based on the content of the transcript to test comprehension or engage users.

Generate
{{ secondsToHumanTime(time) }}
Back
Forward
{{ Math.round(speed * 100) / 100 }}x
{{ secondsToHumanTime(duration) }}
close
New speaker
Add speaker
close
Edit speaker
Save changes
close
Share Transcript