translation fixed after updating dependencies

package.json

@@ -30,6 +30,7 @@
     "lucide": "^0.17.3",
     "lucide-vue-next": "^0.17.3",
     "pinia": "^2.0.9",
+    "recaptcha-v3": "^1.10.0",
     "simplebar": "^5.3.6",
     "tabulator-tables": "^4.9.3",
     "tiny-slider": "^2.9.3",
@@ -38,7 +39,6 @@
     "tom-select": "^1.7.5",
     "vue": "^3.2.25",
     "vue-i18n": "9",
-    "vue-recaptcha-v3": "^2.0.1",
     "vue-router": "4",
     "xlsx": "^0.16.9",
     "zoom-vanilla.js": "^2.0.6"

src/main.js

@@ -6,14 +6,10 @@ import i18n from "./i18n";
 import globalComponents from "./global-components";
 import utils from "./utils";
 import "./assets/css/app.css";
-import { VueReCaptcha } from "vue-recaptcha-v3";
 
 const reCaptchaKey = import.meta.env.VITE_RECAPTCHA_KEY;
 
 const app = createApp(App).use(router).use(i18n).use(createPinia());
-    // .use(VueReCaptcha, { 
-    //     siteKey: reCaptchaKey
-    // });
 
 globalComponents(app);
 utils(app);

src/views/document/Main.vue

@@ -165,7 +165,7 @@ import {
   EXTENSION_LETTER_FILE,
   EXTENSION_QUESTIONNAIRE_FILE
 } from "@/helpers";
-import { useI18n } from 'vue-i18n';
+import i18nn from "@/i18n";
 import { useAuthStore } from "@/stores";
 import router from "@/router";
 
@@ -176,8 +176,6 @@ const { user } = storeToRefs(authStore);
 
 const accountType = ref("");
 
-const { t } = useI18n({});
-
 const applicationStore = useApplicationStore();
 
 const { application } = storeToRefs(applicationStore);
@@ -208,11 +206,11 @@ const fileIsValid = (index, attachment) => {
   validationError.value = {};
 
   if(docFile.value.size > attachment.document_max_size * BYTES_IN_KB) {
-    validationError.value[index] =  t('FILE_MAX_SIZE', {size: attachment.document_max_size});
+    validationError.value[index] =  i18nn.global.t('FILE_MAX_SIZE', {size: attachment.document_max_size});
     return false;
   }
   if(ALLOWED_FILE_TYPES.indexOf(docFile.value.type) < 0) {
-    validationError.value[index] =  t('FILE_ALLOWED_TYPES', {file_types: ALLOWED_FILE_TYPES.join(', ')});
+    validationError.value[index] =  i18nn.global.t('FILE_ALLOWED_TYPES', {file_types: ALLOWED_FILE_TYPES.join(', ')});
     return false;
   }
 

src/views/login/Main.vue

@@ -79,14 +79,12 @@ import dom from "@left4code/tw-starter/dist/js/dom";
 import { useVuelidate } from "@vuelidate/core";
 import { required, helpers, minLength, email } from "@vuelidate/validators";
 import { useAuthStore } from "@/stores";
-import { useI18n } from 'vue-i18n';
+import i18nn from "@/i18n";
 import router from "@/router";
 import Logo from "@/components/logo/Main.vue";
 import LogoInfo from "@/components/logo-info/Main.vue";
 import Lang from "@/components/lang/Main.vue";
 
-const { t } = useI18n({});
-
 const formData = reactive({
   email: "",
   password: "",
@@ -97,14 +95,14 @@ const isForgotPwdLoading = ref(false);
 
 const rules = {
   email: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
-    email: helpers.withMessage(t("EMAIL_VALIDATION"), email),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
+    email: helpers.withMessage(i18nn.global.t("EMAIL_VALIDATION"), email),
   },
 
   password: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
     minLength: helpers.withMessage(
-      t("MIN_LENGTH_VALIDATION", { min: 8 }), minLength(8)
+      i18nn.global.t("MIN_LENGTH_VALIDATION", { min: 8 }), minLength(8)
     )
   },
 };

src/views/profile-forms/Business.vue

@@ -181,7 +181,7 @@ import { useVuelidate } from "@vuelidate/core";
 import { fetchWrapper } from "@/api";
 import { useRoute } from "vue-router";
 import router from "@/router";
-import { useI18n } from 'vue-i18n';
+import i18nn from "@/i18n";
 import _ from "lodash";
 import { helper as $h } from "@/utils/helper";
 import CountryDropdown from "@/components/country-dropdown/Main.vue";
@@ -190,8 +190,6 @@ const baseUrl = `${import.meta.env.VITE_API_URL}/api`;
 
 const route = useRoute();
 
-const { t } = useI18n({});
-
 const maxDate = new Date();
 
 const isLoading = ref(false);
@@ -217,31 +215,31 @@ const formData = reactive({
 
 const rules = {
   surname: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
   },
 
   name: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
   },
 
   patronomic_name: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
   },
 
   date_of_birth: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
   },
 
   birth_place: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
   },
 
   citizenship_id: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
   },
 
   registration_address: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
   },
 };
 

src/views/register/Main.vue

@@ -139,18 +139,23 @@ import router from "@/router";
 import Logo from "@/components/logo/Main.vue";
 import LogoInfo from "@/components/logo-info/Main.vue";
 import Lang from "@/components/lang/Main.vue";
-import { useI18n } from 'vue-i18n';
+import i18nn from "@/i18n";
 import { ACCOUNT_TYPE_BUSINESS, RECAPTCHA_SCORE_MIN, RECAPTCHA_ACTION } from "@/helpers";
 // import { useReCaptcha } from "vue-recaptcha-v3";
 // import { fetchWrapper } from "@/api";
+import { load } from 'recaptcha-v3'
+
+load(import.meta.env.VITE_RECAPTCHA_KEY).then((recaptcha) => {
+  recaptcha.execute('register').then((token) => {
+      console.log(token) // Will print the token
+    })
+})
 
 // const reCaptchaUrl = import.meta.env.VITE_RECAPTCHA_URL;
 // const reCaptchaSecret = import.meta.env.VITE_RECAPTCHA_SECRET;
 
 // const { executeRecaptcha, recaptchaLoaded } = useReCaptcha();
 
-const { t } = useI18n({});
-
 const countriesStore = useCountriesStore();
 const alertStore = useAlertStore();
 
@@ -183,32 +188,32 @@ const formData = reactive({
 
 const rules = {
   firstname: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
     minLength: helpers.withMessage(
-      t("MIN_LENGTH_VALIDATION", { min: 2 }), minLength(2)
+      i18nn.global.t("MIN_LENGTH_VALIDATION", { min: 2 }), minLength(2)
     ),
   },
   lastname: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
     minLength: helpers.withMessage(
-      t("MIN_LENGTH_VALIDATION", { min: 2 }), minLength(2)
+      i18nn.global.t("MIN_LENGTH_VALIDATION", { min: 2 }), minLength(2)
     ),
   },
   email: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
-    email: helpers.withMessage(t("EMAIL_VALIDATION"), email),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
+    email: helpers.withMessage(i18nn.global.t("EMAIL_VALIDATION"), email),
   },
   password: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
     minLength: helpers.withMessage(
-      t("MIN_LENGTH_VALIDATION", { min: 8 }), minLength(8)
+      i18nn.global.t("MIN_LENGTH_VALIDATION", { min: 8 }), minLength(8)
     )
   },
   country: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required)
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required)
   },
   // recaptchaToken: {
-  //   requiredRecaptchaToken: helpers.withMessage(t("RECAPTCHA_TOKEN_REQUIRED"), requiredRecaptchaToken)
+  //   requiredRecaptchaToken: helpers.withMessage(i18nn.global.t("RECAPTCHA_TOKEN_REQUIRED"), requiredRecaptchaToken)
   // }
 };
 
@@ -262,7 +267,7 @@ const onRegister = async () => {
 
     // } else {
 
-    //   alertStore.error(t("RECAPTCHA_TOKEN_VERIFICATION_FAILED"));
+    //   alertStore.error(i18nn.global.t("RECAPTCHA_TOKEN_VERIFICATION_FAILED"));
 
     // }
 

src/views/tickets/CreateTicket.vue

@@ -145,9 +145,7 @@ import { useCategoriesStore } from "@/stores";
 import { storeToRefs } from "pinia";
 import { useTicketsStore } from "@/stores";
 import _ from "lodash";
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n({});
+import i18nn from "@/i18n";
 
 const categoriesStore = useCategoriesStore();
 
@@ -165,15 +163,15 @@ const formData = reactive({
 
 const rules = {
   title: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
   },
 
   content: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
   },
 
   category_id: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
     // todo numeric validation
   },
 };

src/views/update-profile/Main.vue

@@ -163,9 +163,7 @@ import {
 import { useVuelidate } from "@vuelidate/core";
 import { useAuthStore } from "@/stores";
 import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n';
-
-const { t } = useI18n({});
+import i18nn from "@/i18n";
 
 const authStore = useAuthStore();
 const { user } = storeToRefs(authStore);
@@ -182,15 +180,15 @@ const formData = reactive({
 
 const rules = {
   firstname: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
     minLength: helpers.withMessage(
-      t("MIN_LENGTH_VALIDATION", {min: 2}), minLength(2)
+      i18nn.global.t("MIN_LENGTH_VALIDATION", {min: 2}), minLength(2)
     ),
   },
   lastname: {
-    required: helpers.withMessage(t("REQUIRED_VALIDATION"), required),
+    required: helpers.withMessage(i18nn.global.t("REQUIRED_VALIDATION"), required),
     minLength: helpers.withMessage(
-      t("MIN_LENGTH_VALIDATION", {min: 2}), minLength(2)
+      i18nn.global.t("MIN_LENGTH_VALIDATION", {min: 2}), minLength(2)
     ),
   },
   // email: {
@@ -200,7 +198,7 @@ const rules = {
   password: {
     // required,
     minLength: helpers.withMessage(
-      t("MIN_LENGTH_VALIDATION", {min: 8}), minLength(8)
+      i18nn.global.t("MIN_LENGTH_VALIDATION", {min: 8}), minLength(8)
     )
   },
 };