fix: i18n import with globalInjection

src/entities/board/ui/BoardPreviewCard.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed } from 'vue';
-import { useI18n } from 'vue-i18n';
 import type { User} from '@/entities/user/model';
 import { UserAvatar } from '@/entities/user';
 import type { BoardPreview } from '../model';
@@ -9,8 +8,6 @@ defineProps<{
   board: BoardPreview;
 }>();
 
-const { t } = useI18n();
-
 const userPosition = computed(() => {
   return (board: BoardPreview, user: User) => {
     return (board.users.length - 1 - +user._id!) * 12;
@@ -24,7 +21,7 @@ const userPosition = computed(() => {
       <span class="text-xs">{{ board.description }}</span>
     </div>
     <div :class="$style.bottom_part">
-      <span class="text-xs"> {{ t('boards.card.date_updated') }}: May 2024</span>
+      <span class="text-xs"> {{ $t('boards.card.date_updated') }}: May 2024</span>
       <div :class="$style.users">
         <template v-for="user in board.users" :key="user._id">
           <UserAvatar

src/entities/board/ui/__tests__/BoardPreviewCard.spec.ts

@@ -15,12 +15,6 @@ describe('tests for BoardPreviewCard.vue', () => {
       plugins: [i18n],
 
       mocks: {
-        t: (key: string) => {
-          const translations: Record<string, string> = {
-            'boards.card.date_updated': 'Date Updated (test)'
-          };
-          return translations[key];
-        },
         $router: mockRouter
       }
     },
@@ -40,7 +34,7 @@ describe('tests for BoardPreviewCard.vue', () => {
 
   it('should correctly works with i18n', () => {
     const date = wrapper.find('.bottom_part');
-    expect(date.text()).toContain('Date Updated (test)');
+    expect(date.text()).toContain('Updated: May 2024');
   });
 
   it('should redirect to "/board/1" ', async () => {

src/entities/board/ui/__tests__/__snapshots__/BoardPreviewCard.spec.ts.snap

@@ -1,22 +1,11 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`tests for BoardPreviewCard > should render correctly 1`] = `
-"<div class="active_board">
-  <div class="text">
-    <p class="text-base" style="font-weight: 500;">test title</p><span class="text-xs">test description</span>
-  </div>
-  <div class="bottom_part"><span class="text-xs">Date Updated (test): May 2024</span>
-    <div class="users"></div>
-  </div>
-</div>"
-`;
-
 exports[`tests for BoardPreviewCard.vue > should render correctly 1`] = `
 "<div class="active_board">
   <div class="text">
     <p class="text-base" style="font-weight: 500;">test title</p><span class="text-xs">test description</span>
   </div>
-  <div class="bottom_part"><span class="text-xs">Date Updated (test): May 2024</span>
+  <div class="bottom_part"><span class="text-xs">Updated: May 2024</span>
     <div class="users"></div>
   </div>
 </div>"

src/entities/chart/ui/ChartItem.vue

@@ -1,19 +1,16 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import type { Chart } from '../model';
 
 defineProps<{
   chart: Chart;
 }>();
-
-const { t } = useI18n();
 </script>
 
 <template>
   <div :class="$style.chart_container">
-    <h4 class="heading-4">{{ t(`boards.chart.${chart.titleKeyI18n}`) }}</h4>
+    <h4 class="heading-4">{{ $t(`boards.chart.${chart.titleKeyI18n}`) }}</h4>
     <p class="text-sm">
-      {{ t(`boards.chart.${chart.descriptionKeyI18n}`) }}
+      {{ $t(`boards.chart.${chart.descriptionKeyI18n}`) }}
     </p>
     <div :class="$style.chart">
       <component :is="chart.chart" />

src/entities/chart/ui/__tests__/__snapshots__/ChartItem.spec.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`tests for ChartItem.vue  > should render correctly 1`] = `
 "<div class="chart_container">
-  <h4 class="heading-4"></h4>
-  <p class="text-sm"></p>
+  <h4 class="heading-4">boards.chart.test-title</h4>
+  <p class="text-sm">boards.chart.test-description</p>
   <div class="chart">
     <anonymous-stub></anonymous-stub>
   </div>

src/entities/template/ui/TemplateItem.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { UiBadge } from '@/shared/ui';
 import type { Template } from '../model';
 
 defineProps<{
   template: Template;
 }>();
-
-const { t } = useI18n();
 </script>
 
 <template>
@@ -23,7 +20,7 @@ const { t } = useI18n();
       </div>
       <div :class="$style.bottom">
         <span class="text-xs">{{ template.date }}</span>
-        <img v-tooltip.bottom-end="t('templates.user')" :src="template.user" />
+        <img v-tooltip.bottom-end="$t('templates.user')" :src="template.user" />
       </div>
     </div>
   </div>

src/features/auth/ui/SignInForm.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { toast } from 'vue-sonner';
@@ -9,7 +8,6 @@ import { Loader2 } from 'lucide-vue-next';
 import { validationRules } from '../config/validation';
 
 const validationSchema = toTypedSchema(validationRules);
-const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
   validationSchema
@@ -28,12 +26,12 @@ const onLogin = handleSubmit((values) => {
     <div :class="$style.form_container">
       <div :class="$style.form_fields">
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="email">{{ t('authentication.form.email') }}</label>
+          <label class="text-sm" for="email">{{ $t('authentication.form.email') }}</label>
           <UiInput id="email" v-model="email" :placeholder="'[email protected]'" :type="'email'" />
           <span v-if="errors.email" class="text-xs">{{ errors.email }}</span>
         </div>
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="password">{{ t('authentication.form.password') }}</label>
+          <label class="text-sm" for="password">{{ $t('authentication.form.password') }}</label>
           <UiInput
             id="password"
             v-model="password"
@@ -46,12 +44,12 @@ const onLogin = handleSubmit((values) => {
       <div :class="$style.choose_block">
         <UiButton type="submit">
           <!-- <Loader2 :class="$style.loader" /> -->
-          {{ t('authentication.login.btn') }}
+          {{ $t('authentication.login.btn') }}
         </UiButton>
         <p :class="[$style.login, 'text-sm']">
-          {{ t('authentication.login.proposal') }}
+          {{ $t('authentication.login.proposal') }}
           <span :class="$style.login_route" @click="$router.push({ name: RouteNames.registration })">
-            {{ t('authentication.login.route') }}
+            {{ $t('authentication.login.route') }}
           </span>
         </p>
       </div>

src/features/auth/ui/SignUpForm.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { useI18n } from 'vue-i18n';
 import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { toast } from 'vue-sonner';
@@ -9,7 +8,6 @@ import { Loader2 } from 'lucide-vue-next';
 import { validationRules } from '../config/validation';
 
 const validationSchema = toTypedSchema(validationRules);
-const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
   validationSchema
@@ -28,12 +26,12 @@ const onRegistration = handleSubmit((values) => {
     <div :class="$style.form_container">
       <div :class="$style.form_fields">
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="email">{{ t('authentication.form.email') }}</label>
+          <label class="text-sm" for="email">{{ $t('authentication.form.email') }}</label>
           <UiInput id="email" v-model="email" :placeholder="'[email protected]'" :type="'email'" />
           <span v-if="errors.email" class="text-xs">{{ errors.email }}</span>
         </div>
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="password">{{ t('authentication.form.password') }}</label>
+          <label class="text-sm" for="password">{{ $t('authentication.form.password') }}</label>
           <UiInput
             id="password"
             v-model="password"
@@ -46,12 +44,12 @@ const onRegistration = handleSubmit((values) => {
       <div :class="$style.choose_block">
         <UiButton type="submit">
           <!-- <Loader2 :class="$style.loader" /> -->
-          {{ t('authentication.registration.btn') }}
+          {{ $t('authentication.registration.btn') }}
         </UiButton>
         <p :class="[$style.reg, 'text-sm']">
-          {{ t('authentication.registration.proposal') }}
+          {{ $t('authentication.registration.proposal') }}
           <span :class="$style.reg_route" @click="$router.push({ name: RouteNames.login })">
-            {{ t('authentication.registration.route') }}
+            {{ $t('authentication.registration.route') }}
           </span>
         </p>
       </div>

src/features/boards/add-board/ui/CreationBoard.vue

@@ -1,14 +1,11 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { UiSheet } from '@/shared/ui';
 import type { SheetElement } from '@/shared/ui';
 import FormCreation from './FormCreation.vue';
 
 const sheet = ref<SheetElement | null>(null);
 
-const { t } = useI18n();
-
 const open = () => {
   if (sheet.value) {
     sheet.value.open();
@@ -18,13 +15,13 @@ const open = () => {
 
 <template>
   <div :class="$style.creation" @click="open">
-    <span style="font-weight: 500">+ {{ t('boards.create') }}</span>
+    <span style="font-weight: 500">+ {{ $t('boards.create') }}</span>
   </div>
   <UiSheet ref="sheet">
     <template #header>
-      <p class="text-lg" style="font-weight: 500">{{ t('sheet.title') }}</p>
+      <p class="text-lg" style="font-weight: 500">{{ $t('sheet.title') }}</p>
       <span :class="[$style.desc, 'text-sm']">
-        {{ t('sheet.description') }}
+        {{ $t('sheet.description') }}
       </span>
     </template>
     <template #default>

src/features/boards/add-board/ui/FormCreation.vue

@@ -1,14 +1,12 @@
 <script setup lang="ts">
 import { ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useField, useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/zod';
 import { UiButton, UiInput } from '@/shared/ui';
 import { Loader2 } from 'lucide-vue-next';
 import { validationRules } from '../config/validation';
 
 const validationSchema = toTypedSchema(validationRules);
-const { t } = useI18n();
 
 const { handleSubmit, errors } = useForm({
   validationSchema
@@ -25,16 +23,16 @@ const create = handleSubmit((values) => {
     <div :class="$style.form_container">
       <div :class="$style.form_fields">
         <div v-auto-animate :class="$style.field">
-          <label class="text-sm" for="name">{{ t('sheet.form.name.label') }}</label>
-          <UiInput id="name" v-model="name" :placeholder="t('sheet.form.name.placeholder')" />
+          <label class="text-sm" for="name">{{ $t('sheet.form.name.label') }}</label>
+          <UiInput id="name" v-model="name" :placeholder="$t('sheet.form.name.placeholder')" />
           <span v-if="errors.name" class="text-xs">{{ errors.name }}</span>
         </div>
         <div :class="$style.field">
-          <label class="text-sm" for="description">{{ t('sheet.form.description.label') }}</label>
+          <label class="text-sm" for="description">{{ $t('sheet.form.description.label') }}</label>
           <UiInput
             id="description"
             v-model="description"
-            :placeholder="t('sheet.form.description.placeholder')"
+            :placeholder="$t('sheet.form.description.placeholder')"
           />
         </div>
       </div>

src/features/boards/filter/ui/FilterBoards.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { useDark } from '@vueuse/core';
 import { UiButton, UiInput } from '@/shared/ui';
 import { ArrowUpDown, Search, History } from 'lucide-vue-next';
@@ -11,8 +10,6 @@ const isDark = useDark();
 const iconColor = computed(() => {
   return isDark.value ? 'var(--zinc-300)' : 'rgb(82 82 91 / 0.9)';
 });
-
-const { t } = useI18n();
 </script>
 
 <template>
@@ -23,20 +20,20 @@ const { t } = useI18n();
         id="filter"
         ref="filterRef"
         v-model.trim="filter"
-        :placeholder="t('boards.filter.input')"
+        :placeholder="$t('boards.filter.input')"
         :class="$style.filter"
       />
     </div>
     <UiButton
-      v-tooltip.bottom="t('boards.filter.tooltips.first_sort')"
+      v-tooltip.bottom="$t('boards.filter.tooltips.first_sort')"
       :variant="'dashed'"
       style="padding: 0 12px"
     >
       <ArrowUpDown :size="17" :color="iconColor" />
-      <span style="margin-left: 6px">{{ t('boards.filter.popularity') }}</span>
+      <span style="margin-left: 6px">{{ $t('boards.filter.popularity') }}</span>
     </UiButton>
     <UiButton
-      v-tooltip.bottom="t('boards.filter.tooltips.second_sort')"
+      v-tooltip.bottom="$t('boards.filter.tooltips.second_sort')"
       :variant="'dashed'"
       style="padding: 0 12px"
     >

src/features/filter/ui/SearchFilter.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useDark } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
 import { UiInput, UiBadge } from '@/shared/ui';
 import { Search } from 'lucide-vue-next';
 import useFilter from '../lib/composables/useFilter';
@@ -27,7 +26,6 @@ const iconColor = computed(() => {
 });
 
 const { onToggleArea } = useFilter(inputRef, props, emit);
-const { t } = useI18n();
 </script>
 
 <template>
@@ -42,7 +40,7 @@ const { t } = useI18n();
       id="input"
       ref="inputRef"
       v-model.trim="search"
-      :placeholder="t('sidebar.input')"
+      :placeholder="$t('sidebar.input')"
       :class="$style.input_filter"
     />
     <UiBadge

src/features/kanban/ui/ChangeName.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 import { useDark } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
 import { UiBadge, UiInput } from '@/shared/ui';
 import { Check } from 'lucide-vue-next';
 
@@ -15,9 +14,7 @@ const emits = defineEmits<{
   (e: 'updateColor', color: string): void;
 }>();
 
-const { t } = useI18n();
 const isDark = useDark();
-
 const modelName = defineModel<string>();
 
 const isCurrentColor = computed(() => {
@@ -45,7 +42,7 @@ const isCurrentColor = computed(() => {
     </div>
   </div>
   <p :class="[$style.desc, 'text-sm']">
-    {{ t('kanban.configuration.name') }}
+    {{ $t('kanban.configuration.name') }}
   </p>
 </template>