Include and configure vue-i18n

(cherry picked from commit 997412d7)

aleksis/core/assets/app.js

@@ -7,6 +7,25 @@ import ApolloClient from 'apollo-boost'
 import VueApollo from 'vue-apollo'
 
 import "./css/global.scss"
+import VueI18n from 'vue-i18n'
+
+import messages from "./messages.json"
+
+Vue.use(VueI18n)
+
+const i18n = new VueI18n({
+    locale: JSON.parse(document.getElementById("current-language").textContent),
+    fallbackLocale: "en",
+    availableLocales: JSON.parse(document.getElementById("language-info-list").textContent),
+    messages
+});
+
+// Using this function, apps can register their locale files
+i18n.registerLocale = function (messages) {
+    for (let locale in messages) {
+        i18n.mergeLocaleMessage(locale, messages[locale]);
+    }
+};
 
 Vue.use(Vuetify)
 Vue.use(VueRouter)
@@ -96,8 +115,10 @@ const app = new Vue({
         "notification-list": NotificationList,
         "sidenav-search": SidenavSearch,
     },
-    router
+    router,
+    i18n
 })
 
 window.app = app;
 window.router = router;
+window.i18n = i18n;

aleksis/core/assets/components/CacheNotification.vue

 <template>
   <message-box :value="cache" type="warning">
-    {{ this.$root.django.gettext('This page may contain outdated information since there is no internet connection.') }}
+    {{ $t('alerts.page_cached') }}
   </message-box>
 </template>
 

aleksis/core/assets/components/notifications/NotificationItem.vue

@@ -22,7 +22,7 @@
 
         <v-list-item-action v-if="notification.link">
           <v-btn text :href="notification.link">
-            {{ $root.django.gettext('More information →') }}
+            {{ $t('notifications.more_information') }} →
           </v-btn>
         </v-list-item-action>
 

aleksis/core/assets/messages.json

+{
+  "en": {
+    "notifications":  {
+      "more_information": "More information",
+      "no_notifications": "No notifications available yet."
+    },
+    "alerts": {
+      "page_cached": "This page may contain outdated information since there is no internet connection."
+    }
+  },
+  "de": {
+    "notifications": {
+      "more_information": "Mehr Informationen",
+      "no_notifications": "Keine Benachrichtigungen verfügbar."
+    },
+    "alerts": {
+      "page_cached": "Diese Seite enthält vielleicht veraltete Informationen, da es keine Internetverbindung gibt."
+    }
+  }
+}
+

aleksis/core/settings.py

@@ -605,6 +605,7 @@ YARN_INSTALLED_APPS = [
     "webpack@^5.73.0",
     "webpack-bundle-tracker@^1.6.0",
     "webpack-cli@^4.10.0",
+    "vue-i18n@8",
 ]
 
 merge_app_settings("YARN_INSTALLED_APPS", YARN_INSTALLED_APPS, True)