From d64be8871ea502dd1675a6c4cd88da96c531942f Mon Sep 17 00:00:00 2001
From: Alexander Drozdov <snosme@gmail.com>
Date: Wed, 13 Jan 2021 18:45:21 +0200
Subject: [PATCH] use composition i18n

---
 src/web/overlay/Widget.vue                    | 12 +++--
 src/web/overlay/WidgetMenu.vue                | 14 ++++--
 .../price-check/filters/FilterModifier.vue    | 20 ++++----
 src/web/price-check/filters/FilterName.vue    | 11 +++--
 .../filters/FilterNumericEditable.vue         |  6 ++-
 src/web/price-check/filters/FilterVeiled.vue  | 10 ++--
 src/web/price-check/filters/FiltersBlock.vue  | 46 ++++++++++---------
 .../price-check/stack-value/StackValue.vue    |  8 +++-
 .../UnidentifiedResolver.vue                  |  6 ++-
 9 files changed, 84 insertions(+), 49 deletions(-)

diff --git a/src/web/overlay/Widget.vue b/src/web/overlay/Widget.vue
index 1b22c652..99dfe528 100644
--- a/src/web/overlay/Widget.vue
+++ b/src/web/overlay/Widget.vue
@@ -7,13 +7,13 @@
       <div class="absolute px-1" :style="actionsPosition" style="background: rgba(0,0,0,0.01);">
         <div :class="$style.actionsPanel">
           <button v-if="hideable" @click="hide"
-            :class="$style.action">{{ $t('hide') }}</button>
+            :class="$style.action">{{ t('hide') }}</button>
           <button v-if="!readonly" @click="toggleEdit"
-            :class="[$style.action, { [$style.active]: isEditing }]">{{ $t('edit') }}</button>
+            :class="[$style.action, { [$style.active]: isEditing }]">{{ t('edit') }}</button>
           <button v-if="moveHandles !== 'none'" @click="toggleMove"
-            :class="[$style.action, { [$style.active]: isMoving }]">{{ $t('move') }}</button>
+            :class="[$style.action, { [$style.active]: isMoving }]">{{ t('move') }}</button>
           <button v-if="removable" @mousedown="startRemoveTimer" @mouseup="cancelRemoveTimer" @mouseleave="cancelRemoveTimer"
-            :class="[$style.action, $style.removable, { [$style.removing]: isRemoving }]">{{ $t('delete') }}</button>
+            :class="[$style.action, $style.removable, { [$style.removing]: isRemoving }]">{{ t('delete') }}</button>
         </div>
       </div>
       <div v-if="isMoving">
@@ -35,6 +35,7 @@
 <script lang="ts">
 import { defineComponent, PropType, computed, inject, ref } from 'vue'
 import { Widget, Anchor, WidgetManager } from './interfaces'
+import { useI18n } from 'vue-i18n'
 
 function useRemovable (remove: () => void) {
   const isRemoving = ref(false)
@@ -188,7 +189,10 @@ export default defineComponent({
     const isEditing = ref(false)
     const isMoving = ref(false)
 
+    const { t } = useI18n()
+
     return {
+      t,
       moverPosition,
       widgetPosition,
       actionsPosition,
diff --git a/src/web/overlay/WidgetMenu.vue b/src/web/overlay/WidgetMenu.vue
index 17f43199..aa77edd2 100644
--- a/src/web/overlay/WidgetMenu.vue
+++ b/src/web/overlay/WidgetMenu.vue
@@ -16,17 +16,17 @@
               <!-- <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap">Chromatic calculator</button> -->
               <!-- <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap">Screen saver</button> -->
               <!-- add widget -->
-              <div class="text-gray-600 text-sm px-1 select-none whitespace-no-wrap">{{ $t('add widget') }}</div>
-              <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('timer')">{{ $t('Stopwatch') }}</button>
-              <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('stash-search')">{{ $t('Stash search') }}</button>
-              <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('image-strip')">{{ $t('Image strip') }}</button>
+              <div class="text-gray-600 text-sm px-1 select-none whitespace-no-wrap">{{ t('add widget') }}</div>
+              <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('timer')">{{ t('Stopwatch') }}</button>
+              <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('stash-search')">{{ t('Stash search') }}</button>
+              <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('image-strip')">{{ t('Image strip') }}</button>
               <!-- <button class="text-left hover:bg-gray-400 rounded px-1 whitespace-no-wrap" @click="createOfType('TODO')">Image</button> -->
             </div>
           </template>
         </ui-popover>
       </div>
       <div v-if="isEditing" class="text-gray-100 px-2 pb-1 whitespace-no-wrap">
-        <ui-toggle v-model="config.alwaysShow">{{ $t('Show button for active widgets') }}</ui-toggle>
+        <ui-toggle v-model="config.alwaysShow">{{ t('Show button for active widgets') }}</ui-toggle>
       </div>
     </div>
   </widget>
@@ -36,6 +36,7 @@
 import { defineComponent, PropType, computed, inject, ref } from 'vue'
 import { Widget as IWidget, WidgetManager, WidgetMenu } from './interfaces'
 import Widget from './Widget.vue'
+import { useI18n } from 'vue-i18n'
 
 export default defineComponent({
   components: { Widget },
@@ -54,8 +55,11 @@ export default defineComponent({
         (props.config.alwaysShow || (widget.wmWants === 'hide'))
       )
     })
+    
+    const { t } = useI18n()
 
     return {
+      t,
       widgets,
       createOfType (type: string) {
         wm.create(type)
diff --git a/src/web/price-check/filters/FilterModifier.vue b/src/web/price-check/filters/FilterModifier.vue
index 68be912a..9507c749 100644
--- a/src/web/price-check/filters/FilterModifier.vue
+++ b/src/web/price-check/filters/FilterModifier.vue
@@ -7,15 +7,15 @@
           'fas fa-check-square': !filter.disabled
         }"></i>
         <div class="search-text flex-1 mr-1 relative flex min-w-0" style="line-height: 1rem;">
-          <span class="truncate whitespace-pre-wrap"><item-modifier-text :text="$t(filter.text)" :roll="filter.roll" /></span>
-          <span class="search-text-full whitespace-pre-wrap"><item-modifier-text :text="$t(filter.text)" :roll="filter.roll" /></span>
+          <span class="truncate whitespace-pre-wrap"><item-modifier-text :text="t(filter.text)" :roll="filter.roll" /></span>
+          <span class="search-text-full whitespace-pre-wrap"><item-modifier-text :text="t(filter.text)" :roll="filter.roll" /></span>
         </div>
       </button>
       <div class="flex">
-        <ui-input-debounced class="search-num-input rounded-tl mr-px" :placeholder="$t('min')" :min="filter.boundMin" :max="filter.boundMax" step="any" type="number" :class="{ 'rounded-bl': !showQ20Notice }"
+        <ui-input-debounced class="search-num-input rounded-tl mr-px" :placeholder="t('min')" :min="filter.boundMin" :max="filter.boundMax" step="any" type="number" :class="{ 'rounded-bl': !showQ20Notice }"
           v-if="showMinmaxInput" ref="inputMin"
           v-model.number="filter.min" @focus="inputFocus($event, 'min')" :delay="0" />
-        <ui-input-debounced class="search-num-input rounded-tr" :placeholder="$t('max')" :min="filter.boundMin" :max="filter.boundMax" step="any" type="number" :class="{ 'rounded-br': !showQ20Notice }"
+        <ui-input-debounced class="search-num-input rounded-tr" :placeholder="t('max')" :min="filter.boundMin" :max="filter.boundMax" step="any" type="number" :class="{ 'rounded-br': !showQ20Notice }"
           v-if="showMinmaxInput" ref="inputMax"
           v-model.number="filter.max" @focus="inputFocus($event, 'max')" :delay="0" />
       </div>
@@ -29,15 +29,15 @@
             </span>
           </template>
           <template #content>
-            <div style="max-width: 18.5rem;">{{ $t(filter.hidden) }}</div>
+            <div style="max-width: 18.5rem;">{{ t(filter.hidden) }}</div>
           </template>
         </ui-popover>
       </div>
       <div class="flex-1 flex items-start">
         <span v-if="showTypeTags"
-          class="text-xs leading-none px-1 rounded" :class="`mod-type-${filter.type}`">{{ $t(filter.type) }}</span>
+          class="text-xs leading-none px-1 rounded" :class="`mod-type-${filter.type}`">{{ t(filter.type) }}</span>
         <span v-if="filter.variant"
-          class="text-xs leading-none px-1 rounded mod-type-variant">{{ $t('variant') }}</span>
+          class="text-xs leading-none px-1 rounded mod-type-variant">{{ t('variant') }}</span>
       </div>
       <div class="flex-1 mr-4">
         <div style="width: 12.5rem;">
@@ -67,7 +67,7 @@
         </div>
       </div>
       <div v-if="showQ20Notice"
-        class="bg-gray-700 text-gray-500 text-center rounded-b" style="width: calc(2*3rem + 1px)">{{ $t('Q {0}%', [Math.max(20, item.quality || 0)]) }}</div>
+        class="bg-gray-700 text-gray-500 text-center rounded-b" style="width: calc(2*3rem + 1px)">{{ t('Q {0}%', [Math.max(20, item.quality || 0)]) }}</div>
       <div v-else style="width: calc(2*3rem + 1px)"></div>
     </div>
   </div>
@@ -75,6 +75,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed, ref, nextTick, ComponentPublicInstance } from 'vue'
+import { useI18n } from 'vue-i18n'
 import ItemModifierText from '../../ui/ItemModifierText.vue'
 import { Config } from '@/web/Config'
 import { ParsedItem } from '@/parser'
@@ -172,7 +173,10 @@ export default defineComponent({
       }
     }
 
+    const { t } = useI18n()
+
     return {
+      t,
       showMinmaxInput,
       showTypeTags,
       showQ20Notice,
diff --git a/src/web/price-check/filters/FilterName.vue b/src/web/price-check/filters/FilterName.vue
index f971ce65..b58cfe66 100644
--- a/src/web/price-check/filters/FilterName.vue
+++ b/src/web/price-check/filters/FilterName.vue
@@ -4,19 +4,19 @@
       :class="{ 'border-gray-500': showAsActive, 'border-gray-900': !showAsActive }"
       @click="toggleAccuracy">{{ label }}</button>
     <button v-if="filters.corrupted" class="px-2" @click="corrupted = !corrupted">
-      <span v-if="corrupted" class="text-red-500">{{ $t('Corrupted') }}</span>
-      <span v-else class="text-gray-600">{{ $t('Not Corrupted') }}</span>
+      <span v-if="corrupted" class="text-red-500">{{ t('Corrupted') }}</span>
+      <span v-else class="text-gray-600">{{ t('Not Corrupted') }}</span>
     </button>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { ItemRarity, ParsedItem } from '@/parser'
 import { ItemFilters } from './interfaces'
 import { CATEGORY_TO_TRADE_ID } from '../trade/pathofexile-trade'
 import { TRANSLATED_ITEM_NAME_BY_REF } from '@/assets/data'
-import i18n from '../../i18n'
 
 export default defineComponent({
   name: 'FilterName',
@@ -31,6 +31,8 @@ export default defineComponent({
     }
   },
   setup (props, ctx) {
+    const { t } = useI18n()
+
     const label = computed(() => {
       if (props.filters.name) {
         return TRANSLATED_ITEM_NAME_BY_REF.get(props.filters.name.value) ||
@@ -41,7 +43,7 @@ export default defineComponent({
           props.filters.baseType.value
       }
       if (props.filters.category) {
-        return i18n.global.t(`Category: ${props.filters.category.value}`)
+        return t(`Category: ${props.filters.category.value}`)
       }
 
       return '??? Report if you see this text'
@@ -80,6 +82,7 @@ export default defineComponent({
     })
 
     return {
+      t,
       label,
       showAsActive,
       toggleAccuracy,
diff --git a/src/web/price-check/filters/FilterNumericEditable.vue b/src/web/price-check/filters/FilterNumericEditable.vue
index cacde0aa..3aa56192 100644
--- a/src/web/price-check/filters/FilterNumericEditable.vue
+++ b/src/web/price-check/filters/FilterNumericEditable.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="filter"
     class="trade-tag trade-tag--box flex" :class="{ disabled: filter.disabled }">
-    <button @click="filter.disabled = !filter.disabled" class="pl-2">{{ $t(name) }}</button>
+    <button @click="filter.disabled = !filter.disabled" class="pl-2">{{ t(name) }}</button>
     <ui-input-debounced class="trade-tag__input" step="any" type="number"
       v-model.number="filterValue"
       :placeholder="filter.value"
@@ -14,6 +14,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { FilterNumeric } from './interfaces'
 
 export default defineComponent({
@@ -53,7 +54,10 @@ export default defineComponent({
       props.filter!.disabled = false
     }
 
+    const { t } = useI18n()
+
     return {
+      t,
       filterValue,
       inputFocus
     }
diff --git a/src/web/price-check/filters/FilterVeiled.vue b/src/web/price-check/filters/FilterVeiled.vue
index 5a623165..42d542bc 100644
--- a/src/web/price-check/filters/FilterVeiled.vue
+++ b/src/web/price-check/filters/FilterVeiled.vue
@@ -2,16 +2,16 @@
   <ui-popover v-if="filters.veiled" placement="bottom-start" boundary="#price-window">
     <template #target>
       <div class="trade-tag flex items-center" :class="{ disabled: filters.veiled.disabled }">
-        <span>{{ $t(text) }}</span>
+        <span>{{ t(text) }}</span>
         <i v-if="showIcon" class="fas fa-caret-down pl-2 text-gray-400"></i>
       </div>
     </template>
     <template #content>
       <div class="p-2 bg-gray-800 text-gray-400">
         <div class="mb-1" v-for="opt of options" :key="opt.value">
-          <ui-radio v-model="filters.veiled.stat" :value="opt.value">{{ $t(opt.label) }}</ui-radio>
+          <ui-radio v-model="filters.veiled.stat" :value="opt.value">{{ t(opt.label) }}</ui-radio>
         </div>
-        <ui-toggle v-model="filters.veiled.disabled">{{ $t('Disable filter') }}</ui-toggle>
+        <ui-toggle v-model="filters.veiled.disabled">{{ t('Disable filter') }}</ui-toggle>
       </div>
     </template>
   </ui-popover>
@@ -19,6 +19,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { VEILED_STAT } from './veiled'
 import { ItemRarity, ParsedItem } from '@/parser'
 import { ItemFilters } from './interfaces'
@@ -51,7 +52,10 @@ export default defineComponent({
         props.item.rarity !== ItemRarity.Unique
     })
 
+    const { t } = useI18n()
+
     return {
+      t,
       text,
       options,
       showIcon
diff --git a/src/web/price-check/filters/FiltersBlock.vue b/src/web/price-check/filters/FiltersBlock.vue
index 8cbca6ec..9135b87c 100644
--- a/src/web/price-check/filters/FiltersBlock.vue
+++ b/src/web/price-check/filters/FiltersBlock.vue
@@ -2,58 +2,58 @@
   <div>
     <div class="flex flex-wrap items-center pb-2 -mx-1 -mt-1" @mouseleave="handleMouseLeaveStats">
       <button v-if="filters.linkedSockets" class="trade-tag" :class="{ disabled: filters.linkedSockets.disabled }"
-        @click="filters.linkedSockets.disabled = !filters.linkedSockets.disabled">{{ $t('Links: {0}', [filters.linkedSockets.value]) }}</button>
-      <div v-if="filters.mapTier" class="trade-tag">{{ $t('Map Tier: {0}', [filters.mapTier.value]) }}</div>
-      <div v-if="filters.areaLevel" class="trade-tag">{{ $t('Area Level: {0}', [filters.areaLevel.value]) }}</div>
-      <div v-if="filters.heistJob" class="trade-tag">{{ $t(`${filters.heistJob.name} (lvl {0})`, [filters.heistJob.level]) }}</div>
-      <div v-if="filters.mapBlighted" class="trade-tag">{{ $t('Blighted') }}</div>
-      <div v-if="filters.discriminator" class="trade-tag">{{ $t(filters.discriminator.value) }}</div>
+        @click="filters.linkedSockets.disabled = !filters.linkedSockets.disabled">{{ t('Links: {0}', [filters.linkedSockets.value]) }}</button>
+      <div v-if="filters.mapTier" class="trade-tag">{{ t('Map Tier: {0}', [filters.mapTier.value]) }}</div>
+      <div v-if="filters.areaLevel" class="trade-tag">{{ t('Area Level: {0}', [filters.areaLevel.value]) }}</div>
+      <div v-if="filters.heistJob" class="trade-tag">{{ t(`${filters.heistJob.name} (lvl {0})`, [filters.heistJob.level]) }}</div>
+      <div v-if="filters.mapBlighted" class="trade-tag">{{ t('Blighted') }}</div>
+      <div v-if="filters.discriminator" class="trade-tag">{{ t(filters.discriminator.value) }}</div>
       <filter-numeric-editable :filter="filters.itemLevel" name="Item Level:" />
       <filter-numeric-editable :filter="filters.stackSize" name="Stock:" />
       <button v-if="filters.whiteSockets" class="trade-tag" :class="{ disabled: filters.whiteSockets.disabled }"
-        @click="filters.whiteSockets.disabled = !filters.whiteSockets.disabled">{{ $t('White: {0}', [filters.whiteSockets.value]) }}</button>
+        @click="filters.whiteSockets.disabled = !filters.whiteSockets.disabled">{{ t('White: {0}', [filters.whiteSockets.value]) }}</button>
       <button v-if="filters.gemLevel" class="trade-tag" :class="{ disabled: filters.gemLevel.disabled }"
-        @click="filters.gemLevel.disabled = !filters.gemLevel.disabled">{{ $t('Level: {0}', [filters.gemLevel.min]) }}</button>
+        @click="filters.gemLevel.disabled = !filters.gemLevel.disabled">{{ t('Level: {0}', [filters.gemLevel.min]) }}</button>
       <button v-if="filters.quality" class="trade-tag" :class="{ disabled: filters.quality.disabled }"
-        @click="filters.quality.disabled = !filters.quality.disabled">{{ $t('Quality: {0}%', [filters.quality.value]) }}</button>
+        @click="filters.quality.disabled = !filters.quality.disabled">{{ t('Quality: {0}%', [filters.quality.value]) }}</button>
       <button v-if="filters.altQuality" class="trade-tag" :class="{ disabled: filters.altQuality.disabled }"
-        @click="filters.altQuality.disabled = !filters.altQuality.disabled">{{ $t(filters.altQuality.value) }}</button>
+        @click="filters.altQuality.disabled = !filters.altQuality.disabled">{{ t(filters.altQuality.value) }}</button>
       <template v-if="filters.influences">
         <button v-for="influence of filters.influences" :key="influence.value" class="trade-tag flex items-center"
           :class="{ disabled: influence.disabled }"
           @click="influence.disabled = !influence.disabled">
           <template v-if="influence.value === 'Shaper'">
             <img class="w-5 h-5 -m-1" src="@/assets/influence/Shaper.png">
-            <span class="ml-2">{{ $t('Shaper') }}</span>
+            <span class="ml-2">{{ t('Shaper') }}</span>
           </template>
           <template v-if="influence.value === 'Elder'">
             <img class="w-5 h-5 -m-1" src="@/assets/influence/Elder.png">
-            <span class="ml-2">{{ $t('Elder') }}</span>
+            <span class="ml-2">{{ t('Elder') }}</span>
           </template>
           <template v-if="influence.value === 'Crusader'">
             <img class="w-5 h-5 -m-1" src="@/assets/influence/Crusader.png">
-            <span class="ml-2">{{ $t('Crusader') }}</span>
+            <span class="ml-2">{{ t('Crusader') }}</span>
           </template>
           <template v-if="influence.value === 'Hunter'">
             <img class="w-5 h-5 -m-1" src="@/assets/influence/Hunter.png">
-            <span class="ml-2">{{ $t('Hunter') }}</span>
+            <span class="ml-2">{{ t('Hunter') }}</span>
           </template>
           <template v-if="influence.value === 'Redeemer'">
             <img class="w-5 h-5 -m-1" src="@/assets/influence/Redeemer.png">
-            <span class="ml-2">{{ $t('Redeemer') }}</span>
+            <span class="ml-2">{{ t('Redeemer') }}</span>
           </template>
           <template v-if="influence.value === 'Warlord'">
             <img class="w-5 h-5 -m-1" src="@/assets/influence/Warlord.png">
-            <span class="ml-2">{{ $t('Warlord') }}</span>
+            <span class="ml-2">{{ t('Warlord') }}</span>
           </template>
         </button>
       </template>
       <button v-if="filters.unidentified" class="trade-tag" :class="{ disabled: filters.unidentified.disabled }"
-        @click="filters.unidentified.disabled = !filters.unidentified.disabled">{{ $t('Unidentified') }}</button>
+        @click="filters.unidentified.disabled = !filters.unidentified.disabled">{{ t('Unidentified') }}</button>
       <filter-veiled :item="item" :filters="filters" />
       <button v-if="stats.length" class="trade-tag" :class="{ disabled: totalSelectedMods === 0 }" @click="toggleStatsBlock">
-        <span v-if="totalSelectedMods === 0">{{ $t('Stats ignored') }}</span>
-        <span v-else>{{ $t('{0} of {1}, stats', [totalSelectedMods, stats.length]) }}</span>
+        <span v-if="totalSelectedMods === 0">{{ t('Stats ignored') }}</span>
+        <span v-else>{{ t('{0} of {1}, stats', [totalSelectedMods, stats.length]) }}</span>
         <i v-if="!showStatsBlock" class="fas fa-chevron-down pl-2 text-xs text-gray-400"></i>
       </button>
     </div>
@@ -67,12 +67,12 @@
       </form>
       <div class="flex">
         <button @click="toggleStatsBlock" class="bg-gray-700 px-2 py-1 text-gray-400 leading-none rounded-b w-40"
-          >{{ $t('Collapse') }} <i class="fas fa-chevron-up pl-1 text-xs text-gray-600"></i></button>
+          >{{ t('Collapse') }} <i class="fas fa-chevron-up pl-1 text-xs text-gray-600"></i></button>
         <button v-if="shownStats.length != stats.length"
           @click="showHidden = !showHidden" class="ml-2 px-2 pt-2 flex items-center leading-none">
           <i v-if="showHidden" class="fas fa-toggle-on pr-1 text-gray-300"></i>
           <i v-else class="fas fa-toggle-off pr-1 text-gray-600"></i>
-          <span class="text-gray-400">{{ $t('Hidden') }}</span>
+          <span class="text-gray-400">{{ t('Hidden') }}</span>
         </button>
       </div>
     </div>
@@ -81,6 +81,7 @@
 
 <script lang="ts">
 import { defineComponent, watch, ref, computed, PropType } from 'vue'
+import { useI18n } from 'vue-i18n'
 import FilterModifier from './FilterModifier.vue'
 import FilterVeiled from './FilterVeiled.vue'
 import FilterNumericEditable from './FilterNumericEditable.vue'
@@ -117,7 +118,10 @@ export default defineComponent({
       showHidden.value = false
     })
 
+    const { t } = useI18n()
+
     return {
+      t,
       showStatsBlock,
       showHidden,
       totalSelectedMods: computed(() => {
diff --git a/src/web/price-check/stack-value/StackValue.vue b/src/web/price-check/stack-value/StackValue.vue
index d36c8c31..0d1e2a0c 100644
--- a/src/web/price-check/stack-value/StackValue.vue
+++ b/src/web/price-check/stack-value/StackValue.vue
@@ -3,15 +3,16 @@
     class="p-2 border-dashed border border-gray-600 rounded mt-2">
     <div class="flex text-gray-400 leading-none">
       <div class="w-1/2"
-        >{{ $t('You have') }} <span class="font-sans">×</span> {{ value.have.amount }} <i class="fas fa-arrow-right text-gray-600 px-1 text-xs"></i> {{ value.have.price }}</div>
+        >{{ t('You have') }} <span class="font-sans">×</span> {{ value.have.amount }} <i class="fas fa-arrow-right text-gray-600 px-1 text-xs"></i> {{ value.have.price }}</div>
       <div class="w-1/2 pl-2" v-if="value.oneStack"
-        >{{ $t('Stack') }} <span class="font-sans">×</span> {{ value.oneStack.amount }} <i class="fas fa-arrow-right text-gray-600 px-1 text-xs"></i> {{ value.oneStack.price }}</div>
+        >{{ t('Stack') }} <span class="font-sans">×</span> {{ value.oneStack.amount }} <i class="fas fa-arrow-right text-gray-600 px-1 text-xs"></i> {{ value.oneStack.price }}</div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { displayRounding, findByDetailsId, autoCurrency } from '../../background/Prices'
 import { getDetailsId } from '../trends/getDetailsId'
 import { ParsedItem } from '@/parser'
@@ -39,7 +40,10 @@ export default defineComponent({
       return `${displayRounding(price.val, true)} ${price.curr === 'c' ? 'chaos' : 'exa'}`
     }
 
+    const { t } = useI18n()
+
     return {
+      t,
       show: computed(() => {
         const id = getDetailsId(props.item)
         return Boolean(props.filters.stackSize && id && findByDetailsId(id))
diff --git a/src/web/price-check/unidentified-resolver/UnidentifiedResolver.vue b/src/web/price-check/unidentified-resolver/UnidentifiedResolver.vue
index 3b489e73..0fc091a5 100644
--- a/src/web/price-check/unidentified-resolver/UnidentifiedResolver.vue
+++ b/src/web/price-check/unidentified-resolver/UnidentifiedResolver.vue
@@ -1,7 +1,7 @@
 <template>
   <div v-if="show" class="layout-column">
     <div class="m-4 py-1 px-2 bg-gray-900 rounded">
-      {{ $t('You are trying to price check unidentified Unique item with base type "{0}". Which one?', [baseType]) }}
+      {{ t('You are trying to price check unidentified Unique item with base type "{0}". Which one?', [baseType]) }}
     </div>
     <div class="overflow-auto pb-4 px-4">
       <div class="flex flex-wrap -m-1">
@@ -18,6 +18,7 @@
 
 <script lang="ts">
 import { defineComponent, PropType, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { UNIQUES_LIST, TRANSLATED_ITEM_NAME_BY_REF } from '@/assets/data'
 import { ItemRarity, ParsedItem } from '@/parser'
 
@@ -75,7 +76,10 @@ export default defineComponent({
       ctx.emit('identify', newItem)
     }
 
+    const { t } = useI18n()
+
     return {
+      t,
       identifiedVariants,
       show,
       baseType,