Parse messages file and use i18next vue plugin

src/components/betaflight-logo/BetaflightLogo.vue

@@ -72,15 +72,15 @@
   <div class="logo">
     <div class="logo_text">
       <span>
-        {{ $t("versionLabelConfigurator.message") }}: {{ configuratorVersion }}
+        {{ $t("versionLabelConfigurator") }}: {{ configuratorVersion }}
         <br />
         <span v-if="firmwareVersion && firmwareId">
-          {{ $t("versionLabelFirmware.message") }}: {{ firmwareVersion }}
+          {{ $t("versionLabelFirmware") }}: {{ firmwareVersion }}
           {{ firmwareId }}
         </span>
         <br />
         <span v-if="hardwareId">
-          {{ $t("versionLabelTarget.message") }}: {{ hardwareId }}
+          {{ $t("versionLabelTarget") }}: {{ hardwareId }}
         </span>
       </span>
     </div>

src/components/init.js

@@ -4,14 +4,6 @@ import BatteryLegend from "./quad-status/BatteryLegend.vue";
 import BetaflightLogo from "./betaflight-logo/BetaflightLogo.vue";
 import StatusBar from "./status-bar/StatusBar.vue";
 
-// a bit of a hack here to get around the current translations.
-// vue i18n provides slightly different api for this. But
-// it's also possible to provide custom formatter
-Vue.filter(
-    "stripEnd",
-    (value) => value.replace(/\$1%/, "")
-);
-
 // Most of the global objects can go here at first.
 // It's a bit of overkill for simple components,
 // but these instance would eventually have more children

src/components/status-bar/PortUtilization.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <span>{{ $t("statusbar_port_utilization.message") }}</span>
+    <span>{{ $t("statusbar_port_utilization") }}</span>
     <ReadingStat
       message="statusbar_usage_download"
       :value="usageDown"

src/components/status-bar/ReadingStat.vue

@@ -1,6 +1,6 @@
 <template>
   <span>
-    <span>{{ $t(message + ".message") | stripEnd }}</span>
+    <span>{{ $t(message) }}</span>
     <span>{{ value }}</span>
     <span v-if="unit">{{ unit }}</span>
   </span>

src/components/status-bar/StatusBarVersion.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="version">
-    {{ $t("versionLabelConfigurator.message") }}: {{ configuratorVersion }}
+    {{ $t("versionLabelConfigurator") }}: {{ configuratorVersion }}
     <span v-if="firmwareVersion && firmwareId">
-      , {{ $t("versionLabelFirmware.message") }}: {{ firmwareVersion }}
+      , {{ $t("versionLabelFirmware") }}: {{ firmwareVersion }}
       {{ firmwareId }}
     </span>
     <span v-if="hardwareId">
-      , {{ $t("versionLabelTarget.message") }}: {{ hardwareId }}
+      , {{ $t("versionLabelTarget") }}: {{ hardwareId }}
     </span>
     ({{ gitChangesetId }})
   </div>

src/components/vueI18n.js

@@ -1,18 +1,8 @@
 import Vue from "vue";
-import VueI18n from "vue-i18n";
+import VueI18Next from "@panter/vue-i18next";
 
-Vue.use(VueI18n);
+Vue.use(VueI18Next);
 
-const vueI18n = new VueI18n(i18next);
-
-i18next.on("initialized", () => {
-    vueI18n.setLocaleMessage("en", i18next.getDataByLanguage("en").messages);
-});
-
-i18next.on("languageChanged", (lang) => {
-    vueI18n.setLocaleMessage(lang, i18next.getDataByLanguage(lang).messages);
-    vueI18n.locale = lang;
-    document.querySelector("html").setAttribute("lang", lang);
-});
+const vueI18n = new VueI18Next(i18next);
 
 export default vueI18n;