Working example with i18next

client/package-lock.json

@@ -22,6 +22,7 @@
         "d3": "^7.8.5",
         "dayjs": "^1.11.8",
         "graphql": "^16.6.0",
+        "i18next-vue": "^2.2.0",
         "lodash": "^4.17.21",
         "loglevel": "^1.8.0",
         "mitt": "^3.0.0",
@@ -13209,6 +13210,15 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/i18next-vue": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-2.2.0.tgz",
+      "integrity": "sha512-cU3ObbNf1veYWsaWsw9NS/cZGRaVN2GTn13Xmg+Dch+NYa9Wsmz0Ly81EImf2CNDVPIz9RlgizcsxqQ4wTmqaw==",
+      "peerDependencies": {
+        "i18next": ">=19",
+        "vue": "^3.2.43"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -30072,6 +30082,11 @@
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==",
       "dev": true
     },
+    "i18next-vue": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/i18next-vue/-/i18next-vue-2.2.0.tgz",
+      "integrity": "sha512-cU3ObbNf1veYWsaWsw9NS/cZGRaVN2GTn13Xmg+Dch+NYa9Wsmz0Ly81EImf2CNDVPIz9RlgizcsxqQ4wTmqaw=="
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",

client/package.json

@@ -34,6 +34,7 @@
     "d3": "^7.8.5",
     "dayjs": "^1.11.8",
     "graphql": "^16.6.0",
+    "i18next-vue": "^2.2.0",
     "lodash": "^4.17.21",
     "loglevel": "^1.8.0",
     "mitt": "^3.0.0",

client/src/components/FeedbackForm.vue

@@ -17,12 +17,12 @@ import { useMutation } from "@urql/vue";
 import { useRouteQuery } from "@vueuse/router";
 import log from "loglevel";
 import { computed, onMounted, reactive, ref } from "vue";
-import { useI18n } from "vue-i18n";
+import { useTranslation } from "i18next-vue";
 
 const props = defineProps<{ page: LearningContentFeedback }>();
 const courseSessionsStore = useCourseSessionsStore();
 const circleStore = useCircleStore();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 onMounted(async () => {
   log.debug("Feedback mounted");

client/src/components/header/MainNavigationBar.vue

@@ -13,7 +13,7 @@ import { useRouteLookups } from "@/utils/route";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import { breakpointsTailwind, useBreakpoints } from "@vueuse/core";
 import { computed, onMounted, reactive } from "vue";
-import { useI18n } from "vue-i18n";
+import { useTranslation } from "i18next-vue";
 
 log.debug("MainNavigationBar created");
 
@@ -24,7 +24,7 @@ const notificationsStore = useNotificationsStore();
 const { inCockpit, inCompetenceProfile, inCourse, inLearningPath, inMediaLibrary } =
   useRouteLookups();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 const state = reactive({
   showMobileNavigationMenu: false,
   showMobileProfileMenu: false,

client/src/components/ui/RatingScale.vue

@@ -74,9 +74,9 @@
 import QuestionSummary from "@/components/ui/QuestionSummary.vue";
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/vue";
 import { computed } from "vue";
-import { useI18n } from "vue-i18n";
+import { useTranslation } from "i18next-vue";
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 type RGB = [number, number, number];
 const red: RGB = [221, 103, 81]; // red-600

client/src/i18n.ts

@@ -1,5 +1,6 @@
 import type { AvailableLanguages } from "@/stores/user";
 import dayjs from "dayjs";
+import i18next from "i18next";
 import { nextTick } from "vue";
 import { createI18n } from "vue-i18n";
 
@@ -17,11 +18,11 @@ export function setupI18n(
 }
 
 export function setI18nLanguage(locale: string) {
-  if (i18n.mode === "legacy") {
+  // if (i18n.mode === "legacy") {
-    i18n.global.locale = locale;
+  //   i18n.global.locale = locale;
-  } else {
+  // } else {
-    i18n.global.locale.value = locale;
+  //   i18n.global.locale.value = locale;
-  }
+  // }
   /**
    * NOTE:
    * If you need to specify the language setting for headers, such as the `fetch` API, set it here.
@@ -29,6 +30,7 @@ export function setI18nLanguage(locale: string) {
    *
    * axios.defaults.headers.common['Accept-Language'] = locale
    */
+  i18next.changeLanguage(locale);
   document.querySelector("html")?.setAttribute("lang", locale);
 }
 

client/src/i18nextWrapper.ts

@@ -0,0 +1,53 @@
+import i18next from "i18next";
+import I18NextVue from "i18next-vue";
+import { nextTick } from "vue";
+
+i18next
+  // detect user language
+  // learn more: https://github.com/i18next/i18next-browser-languageDetector
+  // .use(LanguageDetector)
+  // init i18next
+  // for all options read: https://www.i18next.com/overview/configuration-options
+  .init({
+    debug: true,
+    fallbackLng: "fr",
+    defaultNS: "translations",
+    resources: {
+      de: {
+        translation: {},
+      },
+    },
+  });
+
+export function i18nextWrapper(app) {
+  app.use(I18NextVue, { i18next });
+  return app;
+}
+
+export async function loadI18nextLocaleMessages(locale: any) {
+  // load locale messages with dynamic import
+  const messages = await import(
+    /* webpackChunkName: "locale-[request]" */ `./locales/${locale}.json`
+  );
+
+  // set locale and locale message
+  console.log(messages);
+  console.log(messages["welcome"]);
+  console.log(
+    "#######################################################################3"
+  );
+  console.log(i18next);
+  window.i18next = i18next;
+  i18next.addResourceBundle(locale, "translations", messages, true, true);
+  // i18next.addResourceBundle(
+  //   "de",
+  //   "translations",
+  //   {
+  //     welcome: "Hallo, jetzt aber!",
+  //   },
+  //   true,
+  //   true
+  // );
+
+  return nextTick();
+}

client/src/locales/de.json

@@ -8,6 +8,7 @@
   "SSO Login/Registration": "SSO Login/Registration",
   "Trainerunterlagen": "Trainerunterlagen",
   "Zur Zeit sind keine Termine vorhanden": "Zur Zeit sind keine Termine vorhanden",
+  "welcome": "Hallo Welt",
   "assignment": {
     "acceptConditionsDisclaimer": "Bedingungen akzeptieren und Ergebnisse abgeben",
     "assessmentDocumentDisclaimer": "Diese geleitete Fallarbeit wird auf Grund des folgenden Beurteilungsinstrument bewertet:",
@@ -89,7 +90,7 @@
   "dashboard": {
     "courses": "Lehrgang",
     "nocourses": "Du wurdest noch keinem Lehrgang zugewiesen.",
-    "welcome": "Willkommen, {name}"
+    "welcome": "Willkommen, {{name}}"
   },
   "feedback": {
     "answers": "Antworten",

client/src/locales/fr.json

@@ -89,7 +89,7 @@
   "dashboard": {
     "courses": "Formation",
     "nocourses": "Tu n’as été affecté(e) à aucune formation encore.",
-    "welcome": "Bienvenue, {name}"
+    "welcome": "Bienvenue, {{name}}"
   },
   "feedback": {
     "answers": "Réponses",

client/src/locales/it.json

@@ -89,7 +89,7 @@
   "dashboard": {
     "courses": "Corso",
     "nocourses": "Non sei ancora stato/a assegnato/a a nessun corso.",
-    "welcome": "Ti diamo il benvenuto, {name}"
+    "welcome": "Ti diamo il benvenuto, {{name}}"
   },
   "feedback": {
     "answers": "Risposte",

client/src/main.ts

@@ -1,3 +1,4 @@
+import { i18nextWrapper, loadI18nextLocaleMessages } from "@/i18nextWrapper";
 import * as Sentry from "@sentry/vue";
 import * as log from "loglevel";
 import { createPinia } from "pinia";
@@ -5,7 +6,6 @@ import { createApp, markRaw } from "vue";
 import type { Router } from "vue-router";
 import "../tailwind.css";
 import App from "./App.vue";
-import { loadLocaleMessages, setupI18n } from "./i18n";
 import router from "./router";
 
 declare module "pinia" {
@@ -25,8 +25,8 @@ if (appEnv.startsWith("prod")) {
 const commit = "VBV_VERSION_BUILD_NUMBER_VBV";
 log.warn(`application started appEnv=${appEnv}, build=${commit}`);
 
-const i18n = setupI18n();
+// const i18n = setupI18n();
-const app = createApp(App);
+const app = i18nextWrapper(createApp(App));
 
 Sentry.init({
   app,
@@ -37,7 +37,7 @@ Sentry.init({
 });
 
 // todo: define lang setup
-loadLocaleMessages("de").then(() => {
+loadI18nextLocaleMessages("de").then(() => {
   app.use(router);
 
   const pinia = createPinia();
@@ -45,7 +45,7 @@ loadLocaleMessages("de").then(() => {
     store.router = markRaw(router);
   });
   app.use(pinia);
-  app.use(i18n);
+  // app.use(i18n);
 
   app.mount("#app");
 });

client/src/pages/LoginPage.vue

@@ -4,8 +4,10 @@ import type { LoginMethod } from "@/types";
 import * as log from "loglevel";
 import { reactive } from "vue";
 import { useRoute } from "vue-router";
+import { useTranslation } from "i18next-vue";
 
 const route = useRoute();
+const { t } = useTranslation();
 
 defineProps<{
   loginMethod: LoginMethod;
@@ -26,6 +28,7 @@ const userStore = useUserStore();
   <main class="bg-gray-200 lg:px-12 lg:py-12">
     <div class="container-medium">
       <h1 class="mb-8">Login</h1>
+      <h2>{{ t("welcome") }}</h2>
 
       <form
         v-if="loginMethod === 'local'"

client/src/pages/cockpit/FeedbackPage.vue

@@ -63,7 +63,7 @@ import { useCurrentCourseSession } from "@/composables";
 import { itGet } from "@/fetchHelpers";
 import * as log from "loglevel";
 import { onMounted, reactive } from "vue";
-import { useI18n } from "vue-i18n";
+import { useTranslation } from "i18next-vue";
 
 interface FeedbackData {
   amount: number;
@@ -80,7 +80,7 @@ const props = defineProps<{
 log.debug("FeedbackPage created", props.circleId);
 
 const courseSession = useCurrentCourseSession();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const orderedQuestions = [
   {

client/src/pages/competence/PerformanceCriteriaPage.vue

@@ -6,7 +6,7 @@ import type { CourseCompletionStatus } from "@/types";
 import * as log from "loglevel";
 import type { Ref } from "vue";
 import { computed, ref } from "vue";
-import { useI18n } from "vue-i18n";
+import { useTranslation } from "i18next-vue";
 
 const props = defineProps<{
   courseSlug: string;
@@ -28,7 +28,7 @@ const shownCriteria = computed(() => {
   });
 });
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const mobileMenuItems: MenuItem[] = [
   {

client/src/pages/learningPath/circlePage/DocumentSection.vue

@@ -73,9 +73,9 @@ import type { CircleDocument, DocumentUploadData } from "@/types";
 import dialog from "@/utils/confirm-dialog";
 import log from "loglevel";
 import { computed, ref, watch } from "vue";
-import { useI18n } from "vue-i18n";
 import DocumentListItem from "./DocumentListItem.vue";
 import DocumentUploadForm from "./DocumentUploadForm.vue";
+import { useTranslation } from "i18next-vue";
 
 const courseSessionsStore = useCourseSessionsStore();
 const circleStore = useCircleStore();
@@ -90,7 +90,7 @@ const dropdownLearningSequences = computed(() =>
 );
 
 // confirm dialog
-const { t } = useI18n();
+const { t } = useTranslation();
 const deleteDocument = async (doc: CircleDocument) => {
   const options = {
     title: t("circlePage.documents.deleteModalTitle"),

client/src/pages/learningPath/circlePage/DocumentUploadForm.vue

@@ -2,7 +2,7 @@
 import ItDropdownSelect from "@/components/ui/ItDropdownSelect.vue";
 import type { DocumentUploadData, DropdownSelectable } from "@/types";
 import { reactive } from "vue";
-import { useI18n } from "vue-i18n";
+import { useTranslation } from "i18next-vue";
 
 export interface Props {
   learningSequences?: DropdownSelectable[];
@@ -10,7 +10,7 @@ export interface Props {
   isUploading?: boolean;
 }
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const props = withDefaults(defineProps<Props>(), {
   learningSequences: () => [],

client/src/pages/learningPath/learningContentPage/assignment/AssignmentSubmissionView.vue

@@ -11,7 +11,7 @@ import { useMutation } from "@urql/vue";
 import type { Dayjs } from "dayjs";
 import log from "loglevel";
 import { computed, reactive } from "vue";
-import { useI18n } from "vue-i18n";
+import { useTranslation } from "i18next-vue";
 
 const props = defineProps<{
   assignment: Assignment;
@@ -26,7 +26,7 @@ const emit = defineEmits<{
 
 const courseSessionsStore = useCourseSessionsStore();
 const courseSession = useCurrentCourseSession();
-const { t } = useI18n();
+const { t } = useTranslation();
 
 const state = reactive({
   confirmInput: false,

client/src/pages/learningPath/learningContentPage/assignment/AssignmentView.vue

@@ -22,9 +22,9 @@ import { useRouteQuery } from "@vueuse/router";
 import dayjs from "dayjs";
 import * as log from "loglevel";
 import { computed, onMounted, reactive } from "vue";
-import { useI18n } from "vue-i18n";
+import { useTranslation } from "i18next-vue";
 
-const { t } = useI18n();
+const { t } = useTranslation();
 const courseSession = useCurrentCourseSession();
 const userStore = useUserStore();
 

client/src/pages/learningPath/learningContentPage/layouts/LearningContentFooter.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import eventBus from "@/utils/eventBus";
 import { computed } from "vue";
-import { useI18n } from "vue-i18n";
+import { useTranslation } from "i18next-vue";
 
 export type ClosingButtonVariant = "close" | "mark_as_done";
 
@@ -13,7 +13,7 @@ const props = defineProps<{
   closingButtonVariant: ClosingButtonVariant;
 }>();
 
-const { t } = useI18n();
+const { t } = useTranslation();
 
 // eslint-disable-next-line vue/return-in-computed-property
 const closingButtonText = computed(() => {

client/src/stores/user.ts

@@ -1,7 +1,8 @@
 import log from "loglevel";
 
 import { bustItGetCache, itGetCached, itPost } from "@/fetchHelpers";
-import { loadLocaleMessages, setI18nLanguage } from "@/i18n";
+import { setI18nLanguage } from "@/i18n";
+import { loadI18nextLocaleMessages } from "@/i18nextWrapper";
 import dayjs from "dayjs";
 import { defineStore } from "pinia";
 
@@ -74,7 +75,7 @@ async function setLocale(language: AvailableLanguages) {
       await import("dayjs/locale/it");
   }
   dayjs.locale(language);
-  await loadLocaleMessages(language);
+  await loadI18nextLocaleMessages(language);
   setI18nLanguage(language);
 }
 

package-lock.json

@@ -8,6 +8,7 @@
       "name": "vbv_lernwelt_cypress",
       "version": "1.0.0",
       "dependencies": {
+        "i18next": "^23.2.6",
         "pa11y": "^6.2.3"
       },
       "devDependencies": {
@@ -16,10 +17,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.21.5",
+      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -1673,6 +1673,28 @@
         "node": ">=8.12.0"
       }
     },
+    "node_modules/i18next": {
+      "version": "23.2.6",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.2.6.tgz",
+      "integrity": "sha512-i0P2XBisewaICJ7UQtwymeJj6cXUigM+s8XNIXmWk4oJ8iTok2taCbOTX0ps+u9DFcQ6FWH6xLIU0dLEnMaNbA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "dependencies": {
+        "@babel/runtime": "^7.22.5"
+      }
+    },
     "node_modules/ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -2753,8 +2775,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-      "dev": true
     },
     "node_modules/request-progress": {
       "version": "3.0.0",
@@ -3400,10 +3421,9 @@
   },
   "dependencies": {
     "@babel/runtime": {
-      "version": "7.21.5",
+      "version": "7.22.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.5.tgz",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.6.tgz",
-      "integrity": "sha512-8jI69toZqqcsnqGGqwGS4Qb1VwLOEp4hz+CXPywcvjs60u3B4Pom/U/7rm4W8tMOYEB+E9wgD0mW1l3r8qlI9Q==",
+      "integrity": "sha512-wDb5pWm4WDdF6LFUde3Jl8WzPA+3ZbxYqkC6xAXuD3irdEHN1k0NfTRrJD8ZD378SJ61miMLCqIOXYhd8x+AJQ==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -4644,6 +4664,14 @@
       "integrity": "sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==",
       "dev": true
     },
+    "i18next": {
+      "version": "23.2.6",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-23.2.6.tgz",
+      "integrity": "sha512-i0P2XBisewaICJ7UQtwymeJj6cXUigM+s8XNIXmWk4oJ8iTok2taCbOTX0ps+u9DFcQ6FWH6xLIU0dLEnMaNbA==",
+      "requires": {
+        "@babel/runtime": "^7.22.5"
+      }
+    },
     "ieee754": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
@@ -5398,8 +5426,7 @@
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
-      "dev": true
     },
     "request-progress": {
       "version": "3.0.0",

package.json

@@ -14,6 +14,7 @@
     "cypress-cloud": "^1.7.4"
   },
   "dependencies": {
+    "i18next": "^23.2.6",
     "pa11y": "^6.2.3"
   }
 }