enable i18n for vuetify (#278)

* enable i18n for vuetify

* load vuetify messages

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* fix i18n import

* remove the usage of tc

---------

Signed-off-by: Jinzhe Zeng <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

Author: njzjz

src/App.vue

@@ -131,7 +131,7 @@ export default {
             installed_templates.length === 0
               ? null
               : {
-                  name: this.$tc(
+                  name: this.$t(
                     "message.installed_template",
                     installed_templates.length,
                   ),
@@ -140,7 +140,7 @@ export default {
             builtin_templates.length === 0
               ? null
               : {
-                  name: this.$tc(
+                  name: this.$t(
                     "message.builtin_template",
                     builtin_templates.length,
                   ),
@@ -149,14 +149,14 @@ export default {
             customized_templates.length === 0
               ? null
               : {
-                  name: this.$tc(
+                  name: this.$t(
                     "message.customized_template",
                     customized_templates.length,
                   ),
                   sub: customized_templates,
                 },
             {
-              name: this.$tc("message.setting", 2),
+              name: this.$t("message.setting", 2),
               sub: [
                 {
                   name: this.$t("message.management"),

src/i18n.js

@@ -1,4 +1,5 @@
 import { createI18n } from "vue-i18n";
+import { en, zhHans } from "vuetify/locale";
 
 function loadLocaleMessages() {
   const locales = require.context(
@@ -14,10 +15,13 @@ function loadLocaleMessages() {
       messages[locale] = locales(key);
     }
   });
+  messages["en"]["$vuetify"] = en;
+  messages["zh"]["$vuetify"] = zhHans;
   return messages;
 }
 
 export default createI18n({
+  legacy: false,
   locale:
     process.env.VUE_APP_I18N_LOCALE || navigator.language.split("-")[0] || "en",
   fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || "en",

src/plugins/vuetify.js

@@ -2,6 +2,9 @@ import "vuetify/styles";
 import { createVuetify } from "vuetify";
 import { aliases, fa } from "vuetify/iconsets/fa";
 import "@fortawesome/fontawesome-free/css/all.css";
+import { createVueI18nAdapter } from "vuetify/locale/adapters/vue-i18n";
+import { useI18n } from "vue-i18n";
+import i18n from "../i18n.js";
 
 const vuetify = createVuetify({
   components: {},
@@ -23,6 +26,9 @@ const vuetify = createVuetify({
       },
     },
   },
+  locale: {
+    adapter: createVueI18nAdapter({ i18n, useI18n }),
+  },
 });
 
 export default vuetify;

src/views/InputConfig.vue

@@ -3,7 +3,7 @@
     <v-data-table :headers="headers" :items="items" :items-per-page="10">
       <template #item.template="{ item }">
         <v-btn :to="item.to">
-          {{ $tc("message.template") }}
+          {{ $t("message.template") }}
         </v-btn>
       </template>
       <template #item.delete="{ item }">
@@ -24,7 +24,7 @@ export default {
     return {
       headers: [
         { title: this.$t("message.name"), key: "name" },
-        { title: this.$tc("message.template"), key: "template" },
+        { title: this.$t("message.template"), key: "template" },
         { title: this.$t("message.delete"), key: "delete" },
       ],
       items: this.all_items(),