diff --git a/@xen-orchestra/lite/README.md b/@xen-orchestra/lite/README.md index 3e6eb21c6..6964ddcc7 100644 --- a/@xen-orchestra/lite/README.md +++ b/@xen-orchestra/lite/README.md @@ -112,7 +112,7 @@ import { faDisplay } from "@fortawesome/free-solid-svg-icons"; Here is the equivalent between font weight and style name. | Style name | Font weight | -|------------|-------------| +| ---------- | ----------- | | Solid | 900 | | Regular | 400 | | Light | 300 | @@ -184,3 +184,64 @@ export const useFoobarStore = defineStore("foobar", () => { }; }); ``` + +### I18n + +Internationalization of the app is done with [Vue-i18n](https://vue-i18n.intlify.dev/). + +Locale files are located in `src/locales` directory. + +Source of truth is `en-US.json` file. + +To quickly check if there are missing translations in other locale files, open `main.ts` and check the `messages` +property of `createI18n()` for TypeScript error. + +#### Example + +```json +{ + "hello": "Hello", + "hello_name": "Hello {name}", + "hello_linked": "@:hello_name how are you?", + "hello_plural": "No hello | Hello to you | Hello to {count} persons" +} +``` + +```html + + +

{{ $t("hello") }}

+ +

{{ $t("hello_name", { name: "World" }) }}

+ +

{{ $t("hello_linked", { name: "World" }) }}

+ +

{{ $tc("hello_plural", 0) }}

+ +

{{ $tc("hello_plural", 1) }}

+ +

{{ $tc("hello_plural", 4) }}

+ + + + +

{{ $d(date, "date_short") }}

+ +

{{ $d(date, "date_medium") }}

+ +

{{ $d(date, "date_long") }}

+ +

{{ $d(date, "datetime_short") }}

+ +

{{ $d(date, "datetime_medium") }}

+ +

{{ $d(date, "datetime_long") }}

+ +

{{ $d(date, "time") }}

+ + + + +

{{ $n(1234567.898765) }}

+ +``` diff --git a/@xen-orchestra/lite/package.json b/@xen-orchestra/lite/package.json index 2f17cb629..d58cbe511 100644 --- a/@xen-orchestra/lite/package.json +++ b/@xen-orchestra/lite/package.json @@ -28,9 +28,11 @@ "make-error": "^1.3.6", "pinia": "^2.0.14", "vue": "^3.2.37", + "vue-i18n": "9", "vue-router": "^4.0.16" }, "devDependencies": { + "@intlify/vite-plugin-vue-i18n": "^6.0.1", "@limegrass/eslint-plugin-import-alias": "^1.0.5", "@rushstack/eslint-patch": "^1.1.0", "@trivago/prettier-plugin-sort-imports": "^3.2.0", diff --git a/@xen-orchestra/lite/src/components/AppHeader.vue b/@xen-orchestra/lite/src/components/AppHeader.vue index 90d36cac0..e0d0deb6c 100644 --- a/@xen-orchestra/lite/src/components/AppHeader.vue +++ b/@xen-orchestra/lite/src/components/AppHeader.vue @@ -4,20 +4,34 @@ XO Lite -
- - Logout +
+ + Logout + + +