From 69c8c84aef8e606c4da89c492897e1cafb47bb8e Mon Sep 17 00:00:00 2001
From: Alexander Brown <drjkl@comfy.org>
Date: Fri, 6 Feb 2026 20:54:53 -0800
Subject: [PATCH] fix: resolve i18n no-restricted-imports lint warnings (#8704)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Fix all i18n `no-restricted-imports` lint warnings and upgrade rules
from `warn` to `error`.

## Changes

- **What**: Migrate Vue components from `import { t/d } from '@/i18n'`
to `const { t } = useI18n()`. Migrate non-component `.ts` files from
`useI18n()` to `import { t/d } from '@/i18n'`. Allow `st` import from
`@/i18n` in Vue components (it wraps `te`/`t` for safe fallback
translation). Remove `@deprecated` tag from `i18n.ts` global exports
(still used by `st` and non-component code). Upgrade both lint rules
from `warn` to `error`.

## Review Focus

- The `st` helper is intentionally excluded from the Vue component
restriction since it provides safe fallback translation needed for
custom node definitions.

Fixes #8701

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-8704-fix-resolve-i18n-no-restricted-imports-lint-warnings-2ff6d73d365081ae84d8eb0dfef24323)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
---
 eslint.config.ts                              |  8 +--
 src/components/graph/GraphCanvas.vue          |  3 +-
 src/components/load3d/Load3dViewerContent.vue |  3 +-
 .../load3d/controls/ModelControls.vue         |  3 +-
 .../load3d/controls/ViewerControls.vue        |  4 +-
 .../controls/viewer/ViewerCameraControls.vue  |  3 +-
 .../controls/viewer/ViewerModelControls.vue   |  3 +-
 .../maskeditor/BrushSettingsPanel.vue         |  3 +-
 .../maskeditor/ColorSelectSettingsPanel.vue   |  4 +-
 .../maskeditor/ImageLayerSettingsPanel.vue    |  3 +-
 .../maskeditor/PaintBucketSettingsPanel.vue   |  4 +-
 src/components/maskeditor/ToolPanel.vue       |  3 +-
 .../maskeditor/dialog/TopBarHeader.vue        |  3 +-
 .../queue/QueueInlineProgressSummary.vue      |  1 +
 .../rightSidePanel/RightSidePanel.vue         |  1 +
 .../rightSidePanel/parameters/WidgetItem.vue  |  1 +
 src/components/sidebar/ModeToggle.vue         |  3 +-
 src/components/sidebar/SideToolbar.vue        |  3 +-
 src/components/topbar/CloudBadge.vue          |  4 +-
 src/components/topbar/LoginButton.vue         |  3 +-
 src/i18n.ts                                   |  1 -
 .../onboarding/components/CloudTemplate.vue   |  5 +-
 .../components/PricingTable.test.ts           | 11 ++++
 .../subscription/components/PricingTable.vue  |  5 +-
 .../settings/components/SettingItem.vue       |  1 +
 .../extensions/linearMode/LinearControls.vue  |  3 +-
 .../extensions/linearMode/LinearPreview.vue   |  3 +-
 .../extensions/linearMode/LinearWelcome.vue   |  4 +-
 .../extensions/linearMode/MobileMenu.vue      |  4 +-
 .../widgets/components/WidgetRecordAudio.vue  |  4 +-
 .../components/form/dropdown/FormDropdown.vue | 66 +++++++++++--------
 src/services/customerEventsService.test.ts    |  4 +-
 src/services/customerEventsService.ts         |  3 +-
 src/views/LinearView.vue                      |  3 +-
 .../manager/stores/comfyManagerStore.ts       |  3 +-
 35 files changed, 117 insertions(+), 66 deletions(-)

diff --git a/eslint.config.ts b/eslint.config.ts
index 8dc7da5a5..13068d621 100644
--- a/eslint.config.ts
+++ b/eslint.config.ts
@@ -287,12 +287,12 @@ export default defineConfig([
     files: ['**/*.vue'],
     rules: {
       'no-restricted-imports': [
-        'warn',
+        'error',
         {
           paths: [
             {
               name: '@/i18n',
-              importNames: ['t', 'd', 'st', 'te'],
+              importNames: ['t', 'd', 'te'],
               message:
                 "In Vue components, use `const { t } = useI18n()` instead of importing from '@/i18n'."
             }
@@ -301,13 +301,13 @@ export default defineConfig([
       ]
     }
   },
-  // Non-composable .ts files must use the global t/d/st/te, not useI18n()
+  // Non-composable .ts files must use the global t/d/te, not useI18n()
   {
     files: ['**/*.ts'],
     ignores: ['**/use[A-Z]*.ts', '**/*.test.ts', 'src/i18n.ts'],
     rules: {
       'no-restricted-imports': [
-        'warn',
+        'error',
         {
           paths: [
             {
diff --git a/src/components/graph/GraphCanvas.vue b/src/components/graph/GraphCanvas.vue
index aad7d6f24..66a9fb64f 100644
--- a/src/components/graph/GraphCanvas.vue
+++ b/src/components/graph/GraphCanvas.vue
@@ -111,6 +111,7 @@ import {
   watch,
   watchEffect
 } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import LiteGraphCanvasSplitterOverlay from '@/components/LiteGraphCanvasSplitterOverlay.vue'
 import TopMenuSection from '@/components/TopMenuSection.vue'
@@ -137,7 +138,6 @@ import { useCopy } from '@/composables/useCopy'
 import { useGlobalLitegraph } from '@/composables/useGlobalLitegraph'
 import { usePaste } from '@/composables/usePaste'
 import { useVueFeatureFlags } from '@/composables/useVueFeatureFlags'
-import { t } from '@/i18n'
 import { LiteGraph } from '@/lib/litegraph/src/litegraph'
 import { useLitegraphSettings } from '@/platform/settings/composables/useLitegraphSettings'
 import { CORE_SETTINGS } from '@/platform/settings/constants/coreSettings'
@@ -175,6 +175,7 @@ import { isCloud } from '@/platform/distribution/types'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
 import { useInviteUrlLoader } from '@/platform/workspace/composables/useInviteUrlLoader'
 
+const { t } = useI18n()
 const emit = defineEmits<{
   ready: []
 }>()
diff --git a/src/components/load3d/Load3dViewerContent.vue b/src/components/load3d/Load3dViewerContent.vue
index c85c4505e..71d6d1eea 100644
--- a/src/components/load3d/Load3dViewerContent.vue
+++ b/src/components/load3d/Load3dViewerContent.vue
@@ -94,6 +94,7 @@
 
 <script setup lang="ts">
 import { onBeforeUnmount, onMounted, ref, toRaw } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import AnimationControls from '@/components/load3d/controls/AnimationControls.vue'
 import CameraControls from '@/components/load3d/controls/viewer/ViewerCameraControls.vue'
@@ -104,11 +105,11 @@ import SceneControls from '@/components/load3d/controls/viewer/ViewerSceneContro
 import Button from '@/components/ui/button/Button.vue'
 import { useLoad3dDrag } from '@/composables/useLoad3dDrag'
 import { useLoad3dViewer } from '@/composables/useLoad3dViewer'
-import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
+const { t } = useI18n()
 const props = defineProps<{
   node?: LGraphNode
   modelUrl?: string
diff --git a/src/components/load3d/controls/ModelControls.vue b/src/components/load3d/controls/ModelControls.vue
index 1cd4b775e..79b67a54b 100644
--- a/src/components/load3d/controls/ModelControls.vue
+++ b/src/components/load3d/controls/ModelControls.vue
@@ -94,15 +94,16 @@
 
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import type {
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
 import { cn } from '@/utils/tailwindUtil'
 
+const { t } = useI18n()
 const {
   hideMaterialMode = false,
   isPlyModel = false,
diff --git a/src/components/load3d/controls/ViewerControls.vue b/src/components/load3d/controls/ViewerControls.vue
index 7ac99fff8..4b8e8442c 100644
--- a/src/components/load3d/controls/ViewerControls.vue
+++ b/src/components/load3d/controls/ViewerControls.vue
@@ -19,13 +19,15 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
 import Load3DViewerContent from '@/components/load3d/Load3dViewerContent.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useLoad3dService } from '@/services/load3dService'
 import { useDialogStore } from '@/stores/dialogStore'
 
+const { t } = useI18n()
 const { node } = defineProps<{
   node: LGraphNode
 }>()
diff --git a/src/components/load3d/controls/viewer/ViewerCameraControls.vue b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
index d675ab77a..bc63d39df 100644
--- a/src/components/load3d/controls/viewer/ViewerCameraControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerCameraControls.vue
@@ -30,10 +30,11 @@
 import Select from 'primevue/select'
 import Slider from 'primevue/slider'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type { CameraType } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
 
+const { t } = useI18n()
 const cameras = [
   { title: t('load3d.cameraType.perspective'), value: 'perspective' },
   { title: t('load3d.cameraType.orthographic'), value: 'orthographic' }
diff --git a/src/components/load3d/controls/viewer/ViewerModelControls.vue b/src/components/load3d/controls/viewer/ViewerModelControls.vue
index 23a67577d..8a850c4a9 100644
--- a/src/components/load3d/controls/viewer/ViewerModelControls.vue
+++ b/src/components/load3d/controls/viewer/ViewerModelControls.vue
@@ -25,13 +25,14 @@
 <script setup lang="ts">
 import Select from 'primevue/select'
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type {
   MaterialMode,
   UpDirection
 } from '@/extensions/core/load3d/interfaces'
-import { t } from '@/i18n'
 
+const { t } = useI18n()
 const { hideMaterialMode = false, isPlyModel = false } = defineProps<{
   hideMaterialMode?: boolean
   isPlyModel?: boolean
diff --git a/src/components/maskeditor/BrushSettingsPanel.vue b/src/components/maskeditor/BrushSettingsPanel.vue
index 7054f1a15..361f3b156 100644
--- a/src/components/maskeditor/BrushSettingsPanel.vue
+++ b/src/components/maskeditor/BrushSettingsPanel.vue
@@ -160,14 +160,15 @@
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { BrushShape } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 import { cn } from '@/utils/tailwindUtil'
 
 import SliderControl from './controls/SliderControl.vue'
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 
 const colorInputRef = ref<HTMLInputElement>()
diff --git a/src/components/maskeditor/ColorSelectSettingsPanel.vue b/src/components/maskeditor/ColorSelectSettingsPanel.vue
index 5a643c3d4..7d40361a8 100644
--- a/src/components/maskeditor/ColorSelectSettingsPanel.vue
+++ b/src/components/maskeditor/ColorSelectSettingsPanel.vue
@@ -61,14 +61,16 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
 import { ColorComparisonMethod } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
 import DropdownControl from './controls/DropdownControl.vue'
 import SliderControl from './controls/SliderControl.vue'
 import ToggleControl from './controls/ToggleControl.vue'
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 
 const methodOptions = Object.values(ColorComparisonMethod)
diff --git a/src/components/maskeditor/ImageLayerSettingsPanel.vue b/src/components/maskeditor/ImageLayerSettingsPanel.vue
index e1c43d92a..b0878be65 100644
--- a/src/components/maskeditor/ImageLayerSettingsPanel.vue
+++ b/src/components/maskeditor/ImageLayerSettingsPanel.vue
@@ -131,12 +131,12 @@
 
 <script setup lang="ts">
 import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { useCanvasManager } from '@/composables/maskeditor/useCanvasManager'
 import type { useToolManager } from '@/composables/maskeditor/useToolManager'
 import type { ImageLayer } from '@/extensions/core/maskeditor/types'
 import { MaskBlendMode, Tools } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
 import SliderControl from './controls/SliderControl.vue'
@@ -145,6 +145,7 @@ const { toolManager } = defineProps<{
   toolManager?: ReturnType<typeof useToolManager>
 }>()
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 const canvasManager = useCanvasManager()
 
diff --git a/src/components/maskeditor/PaintBucketSettingsPanel.vue b/src/components/maskeditor/PaintBucketSettingsPanel.vue
index c5d674b77..bbe4e6841 100644
--- a/src/components/maskeditor/PaintBucketSettingsPanel.vue
+++ b/src/components/maskeditor/PaintBucketSettingsPanel.vue
@@ -27,11 +27,13 @@
 </template>
 
 <script setup lang="ts">
-import { t } from '@/i18n'
+import { useI18n } from 'vue-i18n'
+
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
 import SliderControl from './controls/SliderControl.vue'
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 
 const onToleranceChange = (value: number) => {
diff --git a/src/components/maskeditor/ToolPanel.vue b/src/components/maskeditor/ToolPanel.vue
index 89c8001f7..c0ccc3b26 100644
--- a/src/components/maskeditor/ToolPanel.vue
+++ b/src/components/maskeditor/ToolPanel.vue
@@ -31,18 +31,19 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import type { useToolManager } from '@/composables/maskeditor/useToolManager'
 import { iconsHtml } from '@/extensions/core/maskeditor/constants'
 import type { Tools } from '@/extensions/core/maskeditor/types'
 import { allTools } from '@/extensions/core/maskeditor/types'
-import { t } from '@/i18n'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
 const { toolManager } = defineProps<{
   toolManager: ReturnType<typeof useToolManager>
 }>()
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 
 const onToolSelect = (tool: Tools) => {
diff --git a/src/components/maskeditor/dialog/TopBarHeader.vue b/src/components/maskeditor/dialog/TopBarHeader.vue
index edad78dd7..c1de81f8b 100644
--- a/src/components/maskeditor/dialog/TopBarHeader.vue
+++ b/src/components/maskeditor/dialog/TopBarHeader.vue
@@ -128,15 +128,16 @@
 
 <script setup lang="ts">
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useCanvasTools } from '@/composables/maskeditor/useCanvasTools'
 import { useCanvasTransform } from '@/composables/maskeditor/useCanvasTransform'
 import { useMaskEditorSaver } from '@/composables/maskeditor/useMaskEditorSaver'
-import { t } from '@/i18n'
 import { useDialogStore } from '@/stores/dialogStore'
 import { useMaskEditorStore } from '@/stores/maskEditorStore'
 
+const { t } = useI18n()
 const store = useMaskEditorStore()
 const dialogStore = useDialogStore()
 const canvasTools = useCanvasTools()
diff --git a/src/components/queue/QueueInlineProgressSummary.vue b/src/components/queue/QueueInlineProgressSummary.vue
index 758c5d316..30aedb91f 100644
--- a/src/components/queue/QueueInlineProgressSummary.vue
+++ b/src/components/queue/QueueInlineProgressSummary.vue
@@ -44,6 +44,7 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
+
 const executionStore = useExecutionStore()
 const {
   totalPercent,
diff --git a/src/components/rightSidePanel/RightSidePanel.vue b/src/components/rightSidePanel/RightSidePanel.vue
index 2548b899b..c99cf71da 100644
--- a/src/components/rightSidePanel/RightSidePanel.vue
+++ b/src/components/rightSidePanel/RightSidePanel.vue
@@ -36,6 +36,7 @@ const canvasStore = useCanvasStore()
 const rightSidePanelStore = useRightSidePanelStore()
 const settingStore = useSettingStore()
 const { t } = useI18n()
+
 const { findParentGroup } = useGraphHierarchy()
 
 const { selectedItems: directlySelectedItems } = storeToRefs(canvasStore)
diff --git a/src/components/rightSidePanel/parameters/WidgetItem.vue b/src/components/rightSidePanel/parameters/WidgetItem.vue
index 0f203d38b..33768adad 100644
--- a/src/components/rightSidePanel/parameters/WidgetItem.vue
+++ b/src/components/rightSidePanel/parameters/WidgetItem.vue
@@ -46,6 +46,7 @@ const emit = defineEmits<{
 }>()
 
 const { t } = useI18n()
+
 const canvasStore = useCanvasStore()
 const favoritedWidgetsStore = useFavoritedWidgetsStore()
 const isEditing = ref(false)
diff --git a/src/components/sidebar/ModeToggle.vue b/src/components/sidebar/ModeToggle.vue
index b962bac47..dff2f5277 100644
--- a/src/components/sidebar/ModeToggle.vue
+++ b/src/components/sidebar/ModeToggle.vue
@@ -1,12 +1,13 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
-import { t } from '@/i18n'
 import { useKeybindingStore } from '@/platform/keybindings/keybindingStore'
 import { useCanvasStore } from '@/renderer/core/canvas/canvasStore'
 import { useCommandStore } from '@/stores/commandStore'
 
+const { t } = useI18n()
 const canvasStore = useCanvasStore()
 const keybindingStore = useKeybindingStore()
 
diff --git a/src/components/sidebar/SideToolbar.vue b/src/components/sidebar/SideToolbar.vue
index 0af974f73..42af73e60 100644
--- a/src/components/sidebar/SideToolbar.vue
+++ b/src/components/sidebar/SideToolbar.vue
@@ -58,6 +58,7 @@
 import { useResizeObserver } from '@vueuse/core'
 import { debounce } from 'es-toolkit/compat'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import HelpCenterPopups from '@/components/helpcenter/HelpCenterPopups.vue'
 import ComfyMenuButton from '@/components/sidebar/ComfyMenuButton.vue'
@@ -66,7 +67,6 @@ import SidebarBottomPanelToggleButton from '@/components/sidebar/SidebarBottomPa
 import SidebarSettingsButton from '@/components/sidebar/SidebarSettingsButton.vue'
 import SidebarShortcutsToggleButton from '@/components/sidebar/SidebarShortcutsToggleButton.vue'
 import { useFeatureFlags } from '@/composables/useFeatureFlags'
-import { t } from '@/i18n'
 import { isCloud } from '@/platform/distribution/types'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import { useTelemetry } from '@/platform/telemetry'
@@ -84,6 +84,7 @@ import SidebarIcon from './SidebarIcon.vue'
 import SidebarLogoutIcon from './SidebarLogoutIcon.vue'
 import SidebarTemplatesButton from './SidebarTemplatesButton.vue'
 
+const { t } = useI18n()
 const workspaceStore = useWorkspaceStore()
 const settingStore = useSettingStore()
 const userStore = useUserStore()
diff --git a/src/components/topbar/CloudBadge.vue b/src/components/topbar/CloudBadge.vue
index 93772f7f4..7e22f1146 100644
--- a/src/components/topbar/CloudBadge.vue
+++ b/src/components/topbar/CloudBadge.vue
@@ -10,8 +10,8 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { t } from '@/i18n'
 import type { TopbarBadge as TopbarBadgeType } from '@/types/comfy'
 
 import TopbarBadge from './TopbarBadge.vue'
@@ -31,6 +31,8 @@ withDefaults(
   }
 )
 
+const { t } = useI18n()
+
 const cloudBadge = computed<TopbarBadgeType>(() => ({
   label: t('g.beta'),
   text: 'Comfy Cloud'
diff --git a/src/components/topbar/LoginButton.vue b/src/components/topbar/LoginButton.vue
index 060e1f809..f9d85f73b 100644
--- a/src/components/topbar/LoginButton.vue
+++ b/src/components/topbar/LoginButton.vue
@@ -37,17 +37,18 @@
 import Popover from 'primevue/popover'
 import type { HTMLAttributes } from 'vue'
 import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Button from '@/components/ui/button/Button.vue'
 import { useCurrentUser } from '@/composables/auth/useCurrentUser'
 import { useExternalLink } from '@/composables/useExternalLink'
-import { t } from '@/i18n'
 import { cn } from '@/utils/tailwindUtil'
 
 const { class: className } = defineProps<{
   class?: HTMLAttributes['class']
 }>()
 
+const { t } = useI18n()
 const { isLoggedIn, handleSignIn } = useCurrentUser()
 const { buildDocsUrl } = useExternalLink()
 const apiNodesOverviewUrl = buildDocsUrl(
diff --git a/src/i18n.ts b/src/i18n.ts
index e0ee54e2b..13f25b0ba 100644
--- a/src/i18n.ts
+++ b/src/i18n.ts
@@ -201,7 +201,6 @@ export const i18n = createI18n({
 })
 
 /** Convenience shorthand: i18n.global */
-/** @deprecated use useI18n */
 export const { t, te, d } = i18n.global
 
 /**
diff --git a/src/platform/cloud/onboarding/components/CloudTemplate.vue b/src/platform/cloud/onboarding/components/CloudTemplate.vue
index 24f9765f8..7a21a01b7 100644
--- a/src/platform/cloud/onboarding/components/CloudTemplate.vue
+++ b/src/platform/cloud/onboarding/components/CloudTemplate.vue
@@ -62,14 +62,17 @@
 </template>
 
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+
 import Button from '@/components/ui/button/Button.vue'
-import { t } from '@/i18n'
 import videoPoster from '@/platform/cloud/onboarding/assets/videos/thumbnail.png'
 import videoSrc from '@/platform/cloud/onboarding/assets/videos/video.mp4'
 import CloudLogo from '@/platform/cloud/onboarding/components/CloudLogo.vue'
 import CloudTemplateFooter from '@/platform/cloud/onboarding/components/CloudTemplateFooter.vue'
 import BaseViewTemplate from '@/views/templates/BaseViewTemplate.vue'
 
+const { t } = useI18n()
+
 const handleDownloadClick = () => {
   window.open('https://www.comfy.org/download', '_blank')
 }
diff --git a/src/platform/cloud/subscription/components/PricingTable.test.ts b/src/platform/cloud/subscription/components/PricingTable.test.ts
index 7e649e8fc..de0221f56 100644
--- a/src/platform/cloud/subscription/components/PricingTable.test.ts
+++ b/src/platform/cloud/subscription/components/PricingTable.test.ts
@@ -79,6 +79,17 @@ const i18n = createI18n({
         currentPlan: 'Current Plan',
         subscribeTo: 'Subscribe to {plan}',
         changeTo: 'Change to {plan}',
+        tierNameYearly: '{name} Yearly',
+        yearlyCreditsLabel: 'Yearly credits',
+        monthlyCreditsLabel: 'Monthly credits',
+        maxDurationLabel: 'Max duration',
+        gpuLabel: 'GPU',
+        addCreditsLabel: 'Add more credits',
+        customLoRAsLabel: 'Custom LoRAs',
+        videoEstimateLabel: 'Video estimate',
+        videoEstimateHelp: 'How is this calculated?',
+        videoEstimateExplanation: 'Based on average usage.',
+        videoEstimateTryTemplate: 'Try template',
         maxDuration: {
           standard: '30 min',
           creator: '30 min',
diff --git a/src/platform/cloud/subscription/components/PricingTable.vue b/src/platform/cloud/subscription/components/PricingTable.vue
index 1520a94bf..ec47c59b6 100644
--- a/src/platform/cloud/subscription/components/PricingTable.vue
+++ b/src/platform/cloud/subscription/components/PricingTable.vue
@@ -252,7 +252,6 @@ import { useI18n } from 'vue-i18n'
 import Button from '@/components/ui/button/Button.vue'
 import { useFirebaseAuthActions } from '@/composables/auth/useFirebaseAuthActions'
 import { useErrorHandling } from '@/composables/useErrorHandling'
-import { t } from '@/i18n'
 import { useSubscription } from '@/platform/cloud/subscription/composables/useSubscription'
 import {
   TIER_PRICING,
@@ -292,6 +291,8 @@ interface PricingTierConfig {
   isPopular?: boolean
 }
 
+const { t, n } = useI18n()
+
 const billingCycleOptions: BillingCycleOption[] = [
   { label: t('subscription.yearly'), value: 'yearly' },
   { label: t('subscription.monthly'), value: 'monthly' }
@@ -326,8 +327,6 @@ const tiers: PricingTierConfig[] = [
     isPopular: false
   }
 ]
-
-const { n } = useI18n()
 const { isActiveSubscription, subscriptionTier, isYearlySubscription } =
   useSubscription()
 const { accessBillingPortal, reportError } = useFirebaseAuthActions()
diff --git a/src/platform/settings/components/SettingItem.vue b/src/platform/settings/components/SettingItem.vue
index 91f92b2e9..89260db93 100644
--- a/src/platform/settings/components/SettingItem.vue
+++ b/src/platform/settings/components/SettingItem.vue
@@ -40,6 +40,7 @@ const props = defineProps<{
 }>()
 
 const { t } = useI18n()
+
 function translateOptions(options: (SettingOption | string)[]) {
   if (typeof options === 'function') {
     // @ts-expect-error: Audit and deprecate usage of legacy options type:
diff --git a/src/renderer/extensions/linearMode/LinearControls.vue b/src/renderer/extensions/linearMode/LinearControls.vue
index 23fa7411e..bf5a67e15 100644
--- a/src/renderer/extensions/linearMode/LinearControls.vue
+++ b/src/renderer/extensions/linearMode/LinearControls.vue
@@ -3,11 +3,11 @@ import { useEventListener, useTimeout } from '@vueuse/core'
 import { partition } from 'es-toolkit'
 import { storeToRefs } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { extractVueNodeData } from '@/composables/graph/useGraphNodeManager'
-import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import { useBillingContext } from '@/composables/billing/useBillingContext'
 import SubscribeToRunButton from '@/platform/cloud/subscription/components/SubscribeToRun.vue'
@@ -26,6 +26,7 @@ import { useQueueSettingsStore } from '@/stores/queueStore'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
 
+const { t } = useI18n()
 const commandStore = useCommandStore()
 const executionStore = useExecutionStore()
 const { batchCount } = storeToRefs(useQueueSettingsStore())
diff --git a/src/renderer/extensions/linearMode/LinearPreview.vue b/src/renderer/extensions/linearMode/LinearPreview.vue
index 95bfdf16f..f6955b1a5 100644
--- a/src/renderer/extensions/linearMode/LinearPreview.vue
+++ b/src/renderer/extensions/linearMode/LinearPreview.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import { downloadFile } from '@/base/common/downloadUtil'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { d, t } from '@/i18n'
 import { useMediaAssetActions } from '@/platform/assets/composables/useMediaAssetActions'
 import { getOutputAssetMetadata } from '@/platform/assets/schemas/assetMetadataSchema'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
@@ -26,6 +26,7 @@ import { formatDuration } from '@/utils/dateTimeUtil'
 import { collectAllNodes } from '@/utils/graphTraversalUtil'
 import { executeWidgetsCallback } from '@/utils/litegraphUtil'
 
+const { t, d } = useI18n()
 const mediaActions = useMediaAssetActions()
 
 const { runButtonClick, selectedItem, selectedOutput } = defineProps<{
diff --git a/src/renderer/extensions/linearMode/LinearWelcome.vue b/src/renderer/extensions/linearMode/LinearWelcome.vue
index 6d602d555..3710a245c 100644
--- a/src/renderer/extensions/linearMode/LinearWelcome.vue
+++ b/src/renderer/extensions/linearMode/LinearWelcome.vue
@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { t } from '@/i18n'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 </script>
 
 <template>
diff --git a/src/renderer/extensions/linearMode/MobileMenu.vue b/src/renderer/extensions/linearMode/MobileMenu.vue
index 93abd3bb9..ce90b75f6 100644
--- a/src/renderer/extensions/linearMode/MobileMenu.vue
+++ b/src/renderer/extensions/linearMode/MobileMenu.vue
@@ -4,13 +4,15 @@ import {
   CollapsibleTrigger,
   CollapsibleContent
 } from 'reka-ui'
+import { useI18n } from 'vue-i18n'
 
 import WorkflowsSidebarTab from '@/components/sidebar/tabs/WorkflowsSidebarTab.vue'
 import Button from '@/components/ui/button/Button.vue'
 import Popover from '@/components/ui/Popover.vue'
 import { useWorkflowTemplateSelectorDialog } from '@/composables/useWorkflowTemplateSelectorDialog'
-import { t } from '@/i18n'
 import { useCommandStore } from '@/stores/commandStore'
+
+const { t } = useI18n()
 </script>
 <template>
   <CollapsibleRoot class="flex flex-col">
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
index 6e392d8e0..d1cbfe27d 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetRecordAudio.vue
@@ -85,8 +85,8 @@
 import { useIntervalFn } from '@vueuse/core'
 import { Button } from 'primevue'
 import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { t } from '@/i18n'
 import type { LGraphNode } from '@/lib/litegraph/src/LGraphNode'
 import type { IBaseWidget } from '@/lib/litegraph/src/types/widgets'
 import { useToastStore } from '@/platform/updates/common/toastStore'
@@ -98,6 +98,8 @@ import { useAudioRecorder } from '../composables/audio/useAudioRecorder'
 import { useAudioWaveform } from '../composables/audio/useAudioWaveform'
 import { formatTime } from '../utils/audioUtils'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   readonly?: boolean
   nodeId: string
diff --git a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
index 1a05ba25d..08e35c648 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import Popover from 'primevue/popover'
 import { computed, ref, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 
-import { t } from '@/i18n'
 import { useToastStore } from '@/platform/updates/common/toastStore'
 
 import type {
@@ -46,16 +46,28 @@ interface Props {
   ) => Promise<FormDropdownItem[]>
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  placeholder: t('widgets.uploadSelect.placeholder'),
-  multiple: false,
-  uploadable: false,
-  disabled: false,
-  filterOptions: () => [],
-  sortOptions: () => getDefaultSortOptions(),
-  isSelected: (selected, item, _index) => selected.has(item.id),
-  searcher: defaultSearcher
-})
+const { t } = useI18n()
+
+const {
+  placeholder,
+  multiple = false,
+  uploadable = false,
+  disabled = false,
+  accept,
+  filterOptions = [],
+  sortOptions = getDefaultSortOptions(),
+  showOwnershipFilter,
+  ownershipOptions,
+  showBaseModelFilter,
+  baseModelOptions,
+  isSelected = (selected, item, _index) => selected.has(item.id),
+  searcher = defaultSearcher,
+  items
+} = defineProps<Props>()
+
+const placeholderText = computed(
+  () => placeholder ?? t('widgets.uploadSelect.placeholder')
+)
 
 const selected = defineModel<Set<string>>('selected', {
   default: () => new Set()
@@ -82,24 +94,22 @@ const triggerRef = useTemplateRef('triggerRef')
 const isOpen = ref(false)
 
 const maxSelectable = computed(() => {
-  if (props.multiple === true) return Infinity
-  if (typeof props.multiple === 'number') return props.multiple
+  if (multiple === true) return Infinity
+  if (typeof multiple === 'number') return multiple
   return 1
 })
 
-const itemsKey = computed(() => props.items.map((item) => item.id).join('|'))
+const itemsKey = computed(() => items.map((item) => item.id).join('|'))
 
 const filteredItems = ref<FormDropdownItem[]>([])
 
 const defaultSorter = computed<SortOption['sorter']>(() => {
-  const sorter = props.sortOptions.find(
-    (option) => option.id === 'default'
-  )?.sorter
-  return sorter || (({ items }) => items.slice())
+  const sorter = sortOptions.find((option) => option.id === 'default')?.sorter
+  return sorter || (({ items: i }) => i.slice())
 })
 const selectedSorter = computed<SortOption['sorter']>(() => {
   if (sortSelected.value === 'default') return defaultSorter.value
-  const sorter = props.sortOptions.find(
+  const sorter = sortOptions.find(
     (option) => option.id === sortSelected.value
   )?.sorter
   return sorter || defaultSorter.value
@@ -109,11 +119,11 @@ const sortedItems = computed(() => {
 })
 
 function internalIsSelected(item: FormDropdownItem, index: number): boolean {
-  return props.isSelected?.(selected.value, item, index) ?? false
+  return isSelected(selected.value, item, index)
 }
 
 const toggleDropdown = (event: Event) => {
-  if (props.disabled) return
+  if (disabled) return
   if (popoverRef.value && triggerRef.value) {
     popoverRef.value.toggle(event, triggerRef.value)
     isOpen.value = !isOpen.value
@@ -128,7 +138,7 @@ const closeDropdown = () => {
 }
 
 function handleFileChange(event: Event) {
-  if (props.disabled) return
+  if (disabled) return
   const target = event.target
   if (!(target instanceof HTMLInputElement)) return
   if (target.files) {
@@ -138,7 +148,7 @@ function handleFileChange(event: Event) {
 }
 
 function handleSelection(item: FormDropdownItem, index: number) {
-  if (props.disabled) return
+  if (disabled) return
   const sel = selected.value
   if (internalIsSelected(item, index)) {
     sel.delete(item.id)
@@ -170,11 +180,9 @@ async function customSearcher(
     isCleanup = true
     cleanupFn?.()
   })
-  await props
-    .searcher(query, props.items, (cb) => (cleanupFn = cb))
-    .then((results) => {
-      if (!isCleanup) filteredItems.value = results
-    })
+  await searcher(query, items, (cb) => (cleanupFn = cb)).then((results) => {
+    if (!isCleanup) filteredItems.value = results
+  })
 }
 </script>
 
@@ -183,7 +191,7 @@ async function customSearcher(
     <FormDropdownInput
       :files
       :is-open
-      :placeholder
+      :placeholder="placeholderText"
       :items
       :max-selectable
       :selected
diff --git a/src/services/customerEventsService.test.ts b/src/services/customerEventsService.test.ts
index abc54332a..bf1c6b100 100644
--- a/src/services/customerEventsService.test.ts
+++ b/src/services/customerEventsService.test.ts
@@ -31,8 +31,8 @@ vi.mock('@/stores/firebaseAuthStore', () => ({
   useFirebaseAuthStore: vi.fn(() => mockFirebaseAuthStore)
 }))
 
-vi.mock('vue-i18n', () => ({
-  useI18n: vi.fn(() => mockI18n)
+vi.mock('@/i18n', () => ({
+  d: mockI18n.d
 }))
 
 vi.mock('@/utils/typeGuardUtil', () => ({
diff --git a/src/services/customerEventsService.ts b/src/services/customerEventsService.ts
index 6980f029d..326596de8 100644
--- a/src/services/customerEventsService.ts
+++ b/src/services/customerEventsService.ts
@@ -1,9 +1,9 @@
 import type { AxiosError, AxiosResponse } from 'axios'
 import axios from 'axios'
 import { ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
 import { getComfyApiBaseUrl } from '@/config/comfyApi'
+import { d } from '@/i18n'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
 import type { components, operations } from '@/types/comfyRegistryTypes'
 import { isAbortError } from '@/utils/typeGuardUtil'
@@ -33,7 +33,6 @@ const customerApiClient = axios.create({
 export const useCustomerEventsService = () => {
   const isLoading = ref(false)
   const error = ref<string | null>(null)
-  const { d } = useI18n()
 
   watch(
     () => getComfyApiBaseUrl(),
diff --git a/src/views/LinearView.vue b/src/views/LinearView.vue
index 69deabeca..105a4a886 100644
--- a/src/views/LinearView.vue
+++ b/src/views/LinearView.vue
@@ -8,12 +8,12 @@ import {
 import Splitter from 'primevue/splitter'
 import SplitterPanel from 'primevue/splitterpanel'
 import { ref, useTemplateRef } from 'vue'
+import { useI18n } from 'vue-i18n'
 
 import ModeToggle from '@/components/sidebar/ModeToggle.vue'
 import TopbarBadges from '@/components/topbar/TopbarBadges.vue'
 import WorkflowTabs from '@/components/topbar/WorkflowTabs.vue'
 import TypeformPopoverButton from '@/components/ui/TypeformPopoverButton.vue'
-import { t } from '@/i18n'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 import { useSettingStore } from '@/platform/settings/settingStore'
 import LinearControls from '@/renderer/extensions/linearMode/LinearControls.vue'
@@ -23,6 +23,7 @@ import OutputHistory from '@/renderer/extensions/linearMode/OutputHistory.vue'
 import { useNodeOutputStore } from '@/stores/imagePreviewStore'
 import type { ResultItemImpl } from '@/stores/queueStore'
 
+const { t } = useI18n()
 const nodeOutputStore = useNodeOutputStore()
 const settingStore = useSettingStore()
 
diff --git a/src/workbench/extensions/manager/stores/comfyManagerStore.ts b/src/workbench/extensions/manager/stores/comfyManagerStore.ts
index 22d017019..c6ae8a8e3 100644
--- a/src/workbench/extensions/manager/stores/comfyManagerStore.ts
+++ b/src/workbench/extensions/manager/stores/comfyManagerStore.ts
@@ -2,8 +2,8 @@ import { useEventListener, whenever } from '@vueuse/core'
 import { defineStore } from 'pinia'
 import { v4 as uuidv4 } from 'uuid'
 import { ref, watch } from 'vue'
-import { useI18n } from 'vue-i18n'
 
+import { t } from '@/i18n'
 import { useCachedRequest } from '@/composables/useCachedRequest'
 import { useServerLogs } from '@/composables/useServerLogs'
 import { api } from '@/scripts/api'
@@ -30,7 +30,6 @@ type UpdateAllPacksParams = components['schemas']['UpdateAllPacksParams']
  * Store for state of installed node packs
  */
 export const useComfyManagerStore = defineStore('comfyManager', () => {
-  const { t } = useI18n()
   const managerService = useComfyManagerService()
 
   const installedPacks = ref<InstalledPacksResponse>({})