feat:#60 added switch button (not working)

frontend/src/i18n/index.ts

@@ -1,11 +1,55 @@
-import { createI18n } from 'vue-i18n'
-import messages from "./messages.ts";
+import { createI18n } from "vue-i18n";
+import { nextTick } from "vue";
+import defaultMessages from './translations/en.json'
 
-const i18n = createI18n({
-  legacy: false,
-  globalInjection: true,
-  locale: 'en',
-  messages,
-})
+export const supportedLocales= {
+  'en': { name: 'English'},
+  'de': { name: 'Deutsch'},
+}
+export let defaultLocale = 'en'
+// Private instance of VueI18n object
+let _i18n: any
+// Initializer
+function setup(options = { locale: defaultLocale }) {
+  _i18n = createI18n({
+    legacy: false,
+    locale: options.locale,
+    fallbackLocale: defaultLocale,
+    messages: { [defaultLocale]: defaultMessages },
+  })
+  setLocale(options.locale)
+  return _i18n
+}
 
-export default i18n
+// Sets the active locale.
+function setLocale(newLocale : any) {
+  _i18n.global.locale = newLocale
+  setDocumentAttributesFor(newLocale)
+}
+
+async function loadMessagesFor(locale: any) {
+  const messages = await import(
+    `./translations/${locale}.json`
+    )
+
+  _i18n.global.setLocaleMessage(locale, messages.default)
+
+  return nextTick()
+}
+
+function setDocumentAttributesFor(locale: any) {
+  const htmlElement = document.querySelector('html')
+
+  htmlElement?.setAttribute('lang', locale)
+}
+
+// Public interface
+export default {
+  // Expose the VueI18n instance via a getter
+  get vueI18n() {
+    return _i18n
+  },
+  setup,
+  setLocale,
+  loadMessagesFor,
+}