deploy

package.json

@@ -27,8 +27,10 @@
     "concurrently": "^9.0.1",
     "express": "^4.19.2",
     "firebase": "^10.12.2",
+    "i18n-iso-countries": "^7.13.0",
     "lodash.debounce": "^4.0.8",
     "pinia": "^2.1.7",
+    "primelocale": "^1.2.2",
     "primevue": "^4.0.4",
     "quill": "^2.0.2",
     "quill-better-table": "^1.2.10",

src/components/Breadcrumb.vue

@@ -6,7 +6,7 @@
       @click="$router.go(-1)"
       class="breadcrumb-back"
       ><i-ic:round-arrow-back-ios-new />
-      Back
+      {{ $t("buttons.back") }}
     </Button>
 
     <ul class="breadcrumb__list">

src/components/Panel.vue

@@ -84,12 +84,12 @@
         </g>
       </svg>
     </p>
-    <p class="panel-name-login">Login</p>
+    <p class="panel-name-login">{{ $t("buttons.login") }}</p>
   </router-link>
 </template>
 
 <script setup>
-import { ref, markRaw, onMounted } from "vue";
+import { ref, markRaw, onMounted, inject, computed } from "vue";
 import TeenyiconsUserCircleSolid from "~icons/teenyicons/user-circle-solid";
 import BitcoinIconsExitFilled from "~icons/bitcoin-icons/exit-filled";
 import { getImageUrl, getUsername } from "@/utils/index";
@@ -100,19 +100,20 @@ import { vOnClickOutside } from "@vueuse/components";
 
 const authStore = useAuthStore();
 const { can } = useAbility();
+const t = inject("t");
 
 const isOpen = ref(false);
 
-const items = markRaw([
+const items = computed(() => [
   {
-    label: "Profile",
+    label: t("panel.profile"),
     icon: TeenyiconsUserCircleSolid,
     action: () => {
       router.push({ name: "ProfileUser" });
     },
   },
   {
-    label: "Exit",
+    label: t("panel.exit"),
     icon: BitcoinIconsExitFilled,
     action: authStore.logoutUser,
   },

src/components/PanelMini.vue

@@ -99,7 +99,7 @@
           outlined
         >
           <i-line-md:logout />
-          Logout</Button
+          {{ $t("buttons.logout") }}</Button
         >
       </div>
     </template>
@@ -129,7 +129,7 @@
 </template>
 
 <script setup>
-import { ref, shallowRef } from "vue";
+import { ref, shallowRef, inject, computed } from "vue";
 import TeenyiconsUserCircleSolid from "~icons/teenyicons/user-circle-solid";
 import BitcoinIconsExitFilled from "~icons/bitcoin-icons/exit-filled";
 import { getImageUrl, getUsername } from "@/utils/index";
@@ -141,12 +141,13 @@ import Drawer from "primevue/drawer";
 
 const authStore = useAuthStore();
 const { can } = useAbility();
+const t = inject("t");
 
 const isOpen = ref(false);
 
-const menu = shallowRef([
+const menu = computed(() => [
   {
-    label: "Profile",
+    label: t("panel.profile"),
     icon: TeenyiconsUserCircleSolid,
     action: () => {
       router.push({ name: "ProfileUser" });

src/components/Search.vue

@@ -18,7 +18,7 @@
         class="search-input"
         type="text"
         v-model="search"
-        placeholder="Search City"
+        :placeholder="$t('placeholders.search')"
         unstyled
         autofocus
         @keyup.enter="!searchStore.loading ? onSubmit() : undefined"
@@ -45,7 +45,11 @@
     </InputGroup>
     <transition name="fade">
       <small class="error search-error" v-if="errors.search && focusInput">
-        {{ errors.search }}
+        {{
+          $t(`validation.${errors.search?.key || errors.search}`, {
+            ...errors.search?.values,
+          })
+        }}
       </small>
     </transition>
   </div>

src/components/SearchMini.vue

@@ -13,7 +13,7 @@
     :pt="getClasses('search').drawer"
   >
     <template #header>
-      <p class="search-drawer-header-text">Enter name city:</p>
+      <p class="search-drawer-header-text">{{ $t("search.header") }}</p>
     </template>
     <Search @submit="hideDrawer()" />
   </Drawer>
@@ -63,7 +63,7 @@ const hideDrawer = () => {
     }
     .p-drawer-close-button {
       color: var(--grey-light);
-      &:hover{
+      &:hover {
         background-color: var(--hover-grey);
       }
     }
@@ -76,7 +76,7 @@ const hideDrawer = () => {
       width: 100%;
     }
 
-    &-mask{
+    &-mask {
       z-index: 1500 !important;
     }
   }

src/components/UI/Error.vue

@@ -2,9 +2,13 @@
   <div class="error-page">
     <i-bxs:error />
     <p class="error-page-text">{{ message }}</p>
-    <div class="error-page-btns" >
-      <button @click="$emit('toBack')" class="error-page-btn">Back</button>
-      <button v-if="retry" @click="$emit('retry')" class="error-page-btn">Retry</button>
+    <div class="error-page-btns">
+      <button @click="$emit('toBack')" class="error-page-btn">
+        {{ $t("buttons.back") }}
+      </button>
+      <button v-if="retry" @click="$emit('retry')" class="error-page-btn">
+        {{ $t("buttons.retry") }}
+      </button>
     </div>
   </div>
 </template>
@@ -16,8 +20,8 @@ const props = defineProps({
   message: String,
   retry: {
     type: Boolean,
-    default: false
-  }
+    default: false,
+  },
 });
 </script>
 
@@ -58,7 +62,7 @@ const props = defineProps({
   border-radius: 8px;
   margin-top: 40px;
   font-size: 16px;
-  transition: background-color 0.3s, filter .3s, font-weight .3s;
+  transition: background-color 0.3s, filter 0.3s, font-weight 0.3s;
   &:nth-child(1) {
     border: 1px solid var(--blue-630);
     background-color: var(--transparent-6);
@@ -75,7 +79,7 @@ const props = defineProps({
     font-weight: 500;
     color: var(--black-3);
     background-color: var(--blue-160);
-    &:hover{
+    &:hover {
       filter: brightness(1.2);
     }
   }