[FEATURE] Internationalization support for multi languages

[DongHuiTiao]

实现思路

1. 前端引入 vue-i18n 依赖
2. 依照项目现有代码，整理需要随着【语言】替换的 message 字符列表
3. 将 message 绑定到 vue-i18n 实例，将 vue-i18n 实例绑定到 vue 上
4. 通过 {{ $t("message.[field]") }} 将配置到的字符串渲染到页面上
5. 在菜单列表中增加可切换语言的菜单

初始化时的默认语言

第一次打开自动选择系统的语言（已从 rust 获取系统的语言）

语言设置的持久化

当选定一个语言，之后每次打开都应该保持当前选择的语言

TASKS

• get current system language
• add package vue-i18n globally
• extract text variables from all components to a json file
• replace all text field with {{ $t("[field]") }}
• adjust UI display for different language
• add language switch in setting
• persistent storage for selected language

[orangelckc]

Anyone wishes to contribute, be free to comment and @DongHuiTiao.

Currently, only English is on the translations list. If you want to translate our app to another/other language(s), please let us know, and we will add it/them to the list.

Thank you for your support and help in making our app accessible to more people around the world!

[davidramos-om]

Hi @DongHuiTiao,

I'm just right away to add support for internationalization. I been thinking of choosing between the following:

• i18n pure : easy to set up, requires us to add every sentence to a JSON file, making our flow intermittent.
• FormatJS/vue-intl : good when we work with values
• Lingui.dev : we just wrap the text, and extract all sentences by running a CLI command, and then translate. We can keep building as long we wrap the texts.

I would choose LinguiJS. From my experience, it makes coding painless, but any of them is good enough.

What are your thoughts about it?

[davidramos-om]

My bad, just realized Vue is not fully supported by LinguiJS, looks like that feature is on the way, but for now, let's go with i18n

[DongHuiTiao]

Hi @davidramos-om

I found relatively little information on GitHub when searching for "lingui" and "Vue" as keywords, which is a pity.

While Lingui's ability to translate vocabulary by itself is convenient, there is a risk of inaccurate translations.

So, how about we try to use vue-i18n? It appears to be very straightforward, If anyone need to add a language, just add a corresponding vocabulary configuration.

[DongHuiTiao]

Hi @davidramos-om

I found relatively little information on GitHub when searching for "lingui" and "Vue" as keywords, which is a pity.

While Lingui's ability to translate vocabulary by itself is convenient, there is a risk of inaccurate translations.

So, how about we try to use vue-i18n? It appears to be very straightforward, If anyone need to add a language, just add a corresponding vocabulary configuration.

Sorry, I used translation software for English, so my words may look a bit strange.

[orangelckc]

As mentioned in the tasks, we have already decided to use vue-i18n as the default language support plugin.
I just pushed the configured commit b66a6ea in branch dev_lang.
Please notice that the vite-plugin for vue-i18n is here, we need one that supports vite@4.

[davidramos-om]

Thanks @orangelckc, sorry for the oversight.

[DongHuiTiao]

Hi @davidramos-om ,

I have just extracted all the text variables from the project and updated them in the dev_lang branch.

You can find these variables in the json files under src/locales.

I used the I18n ALLY plugin in vscode to translate them, but my variable names and machine-translated English might not be very standard.

Could you please take some time to review the code and test it? Thank you!

[davidramos-om]

Thanks @DongHuiTiao
Translations were pretty good, I just made a few adjustments to the labels we familiarized, and also support for Spanish added.

I've open a PR from my cloned repo to dev_lang branch

[ayangweb]

@davidramos-om Thanks to David's contribution, your pr has been merged and if you have time, you can add REDEME in Spanish!

[ayangweb]

@davidramos-om Hi David, I uploaded the Spanish docs in the dev_lang branch, can you help me with the touch-ups? I translated it from the English docs!

[davidramos-om]

done! @bilibili-ayang , screenshots for English and Spanish added too.

[ayangweb]

@davidramos-om Thanks, it's cool, good cooperation

[andrii-bodnar]

Hey everyone 👋

Recently Lingui had an official v4 release and the Vue.js support is already here - https://lingui.dev/tutorials/extractor-vue

[davidramos-om]

That's a wonderful news @andrii-bodnar, thanks for the head up.

[ayangweb]

@davidramos-om Hey, it's been a while! We've developed a new app and we're in the process of internationalizing it, would you be interested in contributing in English and other languages?

[davidramos-om]

@ayangweb Hi there,

Thanks for letting me know. Sure, I can help with translations. I tried to install it on an M1 and ran into an issue (the app is damaged)

[ayangweb]

@ayangweb Hi there,

Thanks for letting me know. Sure, I can help with translations. I tried to install it on an M1 and ran into an issue (the app is damaged)

Hey, this is normal, just fix it with the following command!

sudo xattr -r -d com.apple.quarantine /Applications/EcoPaste.app

[ayangweb]

@ayangweb Hi there,

Thanks for letting me know. Sure, I can help with translations. I tried to install it on an M1 and ran into an issue (the app is damaged)

Hey, we have submitted the full English translation of the json file, but we are using machine translation, you can go as short as possible to shorten the sentence, our goal is short, shorter, shortest! 😁