fix: i18n ICU loading failure due to original auto-loading.

backend/app/api/routes.go

@@ -4,12 +4,6 @@ import (
 	"embed"
 	"errors"
 	"fmt"
-	"io"
-	"mime"
-	"net/http"
-	"path"
-	"path/filepath"
-
 	"github.com/go-chi/chi/v5"
 	"github.com/hay-kot/httpkit/errchain"
 	httpSwagger "github.com/swaggo/http-swagger/v2" // http-swagger middleware
@@ -19,6 +13,11 @@ import (
 	_ "github.com/sysadminsmedia/homebox/backend/app/api/static/docs"
 	"github.com/sysadminsmedia/homebox/backend/internal/data/ent/authroles"
 	"github.com/sysadminsmedia/homebox/backend/internal/data/repo"
+	"io"
+	"mime"
+	"net/http"
+	"path"
+	"path/filepath"
 )
 
 const prefix = "/api"

frontend/layouts/default.vue

@@ -39,7 +39,7 @@
         <div class="w-60 py-5 md:py-10 bg-base-200 flex flex-grow-1 flex-col">
           <div class="space-y-8">
             <div class="flex flex-col items-center gap-4">
-              <p>Welcome, {{ username }}</p>
+              <p>{{ $t("global.welcome", { username: username }) }}</p>
               <NuxtLink class="avatar placeholder" to="/home">
                 <div class="bg-base-300 text-neutral-content rounded-full w-24 p-4">
                   <AppLogo />
@@ -53,7 +53,7 @@
                     <span>
                       <MdiPlus class="mr-1 -ml-1" />
                     </span>
-                    Create
+                    {{ $t("global.create") }}
                   </label>
                   <ul tabindex="0" class="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-40">
                     <li v-for="btn in dropdown" :key="btn.name">
@@ -83,7 +83,9 @@
           </div>
 
           <!-- Bottom -->
-          <button class="mt-auto mx-2 hover:bg-base-300 p-3 rounded-btn" @click="logout">Sign Out</button>
+          <button class="mt-auto mx-2 hover:bg-base-300 p-3 rounded-btn" @click="logout">
+            {{ $t("global.sign_out") }}
+          </button>
         </div>
       </div>
     </div>

frontend/locales/en.json

@@ -11,7 +11,9 @@
         "submit": "Submit",
         "confirm": "Confirm",
         "create": "Create",
-        "create_and_add": "Create and Add Another"
+        "create_and_add": "Create and Add Another",
+        "welcome": "Welcome, { username }",
+        "sign_out": "Sign Out"
     },
     "index": {
         "tagline": "Track, Organize, and Manage your Things.",
@@ -25,6 +27,16 @@
         "joining_group": "You're Joining an Existing Group!",
         "dont_join_group": "Don't want to join a group?"
     },
+    "profile": {
+        "change_password": "Change Password",
+        "current_password": "Current Password",
+        "new_password": "New Password",
+        "notifier": "{ type, select, true {Edit} false {Create} other {Other}} Notifier",
+        "name": "Name",
+        "url": "URL",
+        "enabled": "Enabled",
+        "test": "Test"
+    },
     "components": {
         "global": {
             "password_score": {

frontend/nuxt.config.ts

@@ -1,7 +1,4 @@
-import { resolve, dirname } from "node:path";
-import { fileURLToPath } from "url";
 import { defineNuxtConfig } from "nuxt/config";
-import VueI18nVitePlugin from "@intlify/unplugin-vue-i18n/vite";
 
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 export default defineNuxtConfig({
@@ -9,13 +6,6 @@ export default defineNuxtConfig({
   build: {
     transpile: ["vue-i18n"],
   },
-  vite: {
-    plugins: [
-      VueI18nVitePlugin({
-        include: [resolve(dirname(fileURLToPath(import.meta.url)), "./locales/**")],
-      }),
-    ],
-  },
   modules: [
     "@nuxtjs/tailwindcss",
     "@pinia/nuxt",

frontend/pages/profile.vue

@@ -305,11 +305,11 @@
 <template>
   <div>
     <BaseModal v-model="passwordChange.dialog">
-      <template #title> Change Password </template>
+      <template #title> {{ $t("profile.change_password") }} </template>
 
       <form @submit.prevent="changePassword">
-        <FormPassword v-model="passwordChange.current" label="Current Password" placeholder="" />
+        <FormPassword v-model="passwordChange.current" :label="$t('profile.current_password')" placeholder="" />
-        <FormPassword v-model="passwordChange.new" label="New Password" placeholder="" />
+        <FormPassword v-model="passwordChange.new" :label="$t('profile.new_password')" placeholder="" />
         <PasswordScore v-model:valid="passwordChange.isValid" :password="passwordChange.new" />
 
         <div class="flex">
@@ -319,26 +319,26 @@
             :disabled="!passwordChange.isValid"
             type="submit"
           >
-            Submit
+            {{ $t("global.submit") }}
           </BaseButton>
         </div>
       </form>
     </BaseModal>
 
     <BaseModal v-model="notifierDialog">
-      <template #title> {{ notifier ? "Edit" : "Create" }} Notifier </template>
+      <template #title> {{ $t("profile.notifier", {type: (notifier != null)}) }} </template>
 
       <form @submit.prevent="createNotifier">
         <template v-if="notifier">
-          <FormTextField v-model="notifier.name" label="Name" />
+          <FormTextField v-model="notifier.name" :label="$t('profile.name')" />
-          <FormTextField v-model="notifier.url" label="URL" />
+          <FormTextField v-model="notifier.url" :label="$t('profile.url')" />
           <div class="max-w-[100px]">
-            <FormCheckbox v-model="notifier.isActive" label="Enabled" />
+            <FormCheckbox v-model="notifier.isActive" :label="$t('profile.enabled')" />
           </div>
         </template>
         <div class="flex gap-2 justify-between mt-4">
-          <BaseButton :disabled="!(notifier && notifier.url)" type="button" @click="testNotifier"> Test </BaseButton>
+          <BaseButton :disabled="!(notifier && notifier.url)" type="button" @click="testNotifier"> {{ $t("profile.test") }} </BaseButton>
-          <BaseButton type="submit"> Submit </BaseButton>
+          <BaseButton type="submit"> {{ $t("global.submit") }} </BaseButton>
         </div>
       </form>
     </BaseModal>
@@ -371,6 +371,22 @@
         </div>
       </BaseCard>
 
+      <BaseCard>
+        <template #title>
+          <BaseSectionHeader>
+            <span class="text-base-600">Language</span>
+            <template #description>Change the language of the application</template>
+          </BaseSectionHeader>
+        </template>
+        <div class="p-5 pt-0">
+          <div class="form-control w-full">
+            <select id="locale-select" v-model="$i18n.locale" class="select select-bordered">
+              <option v-for="locale in $i18n.availableLocales" :key="locale" :value="locale">{{ locale }}</option>
+            </select>
+          </div>
+        </div>
+      </BaseCard>
+
       <BaseCard>
         <template #title>
           <BaseSectionHeader>

frontend/plugins/i18n.ts

@@ -1,7 +1,6 @@
 import type { CompileError, MessageCompiler, MessageContext } from "vue-i18n";
 import { createI18n } from "vue-i18n";
-import IntlMessageFormat from "intl-messageformat";
+import { IntlMessageFormat } from "intl-messageformat";
-import messages from '@intlify/unplugin-vue-i18n/messages'
 
 export default defineNuxtPlugin(({ vueApp }) => {
   const i18n = createI18n({
@@ -10,9 +9,8 @@ export default defineNuxtPlugin(({ vueApp }) => {
     locale: "en",
     fallbackLocale: "en",
     messageCompiler,
-    messages,
+    messages: messages(),
   });
-
   vueApp.use(i18n);
 });
 
@@ -35,3 +33,13 @@ export const messageCompiler: MessageCompiler = (message, { locale, key, onError
     return () => key;
   }
 };
+
+export const messages: Object = () => {
+  let messages = {};
+  const modules = import.meta.glob('~//locales/**.json', { eager: true });
+  for (const path in modules) {
+    const key = path.slice(9, -5);
+    messages[key] = modules[path];
+  }
+  return messages;
+};