working on locale (not yet fully working)

vue3/src/apps/tandoor/Tandoor.vue

@@ -34,6 +34,7 @@
                     </v-list>
                 </v-menu>
             </v-avatar>
+              Test: {{$t('No_Results')}}
         </v-app-bar>
 
         <v-main>

vue3/src/apps/tandoor/main.ts

@@ -1,6 +1,8 @@
 import {createApp} from "vue";
 import {createRouter, createWebHashHistory} from 'vue-router'
 import {createPinia} from 'pinia'
+import en from '../../locales/en.json'
+import de from '../../locales/de.json'
 // @ts-ignore
 import App from './Tandoor.vue'
 
@@ -15,6 +17,8 @@ import RecipeEditPage from "@/pages/RecipeEditPage.vue";
 import MealPlanPage from "@/pages/MealPlanPage.vue";
 import SearchPage from "@/pages/SearchPage.vue";
 import TestPage from "@/pages/TestPage.vue";
+import {createI18n} from "vue-i18n";
+import {getLocale, loadLocaleMessages, setI18nLanguage, setupI18n, SUPPORT_LOCALES} from "@/i18n";
 
 const routes = [
     {path: '/', component: StartPage, name: 'view_home'},
@@ -33,12 +37,29 @@ const router = createRouter({
     routes,
 })
 
+let locale = document.querySelector('html')!.getAttribute('lang')
+if (locale == null || !SUPPORT_LOCALES.includes(locale)) {
+    console.log('falling back to en because ', locale, ' is not supported as a locale')
+    locale = 'en'
+}
+const localeMessages = await import((`../../locales/${locale}.json`))
+console.log(localeMessages, de)
+const i18n = setupI18n({
+    legacy: false,
+    locale: locale,
+    fallbackLocale: 'en',
+    messages: {
+       en, de
+    }
+})
+
+
 const app = createApp(App)
 
 app.use(createPinia())
 app.use(vuetify)
 app.use(router)
-app.use(luxonPlugin)
+app.use(i18n)
 app.use(mavonEditor) // TODO only use on pages that need it
 
 app.mount('#app')