The translation isn't updated in real time when switching languages. It needs a refresh.

[comfyui-wiki]

Problem

Vue node translations don't update in real-time when switching languages in settings - they require a page refresh to display the new language.

Screen.Recording.2025-09-20.at.19.11.16.mov

Root Cause

Vue node components use the global $t() function which isn't reactive to i18n.global.locale.value changes. The locale is updated in GraphView.vue:157 but Vue nodes don't re-render.

Components affected:

• NodeHeader.vue:3 - $t('Node Header Error')
• NodeContent.vue - $t('Node Content Error')
• NodeWidgets.vue - $t('Node Widgets Error')
• LGraphNode.vue - $t('Node Render Error')

Reproduction

1. Enable Vue nodes (Comfy.VueNodes.Enabled = true)
2. Open Settings and change language (e.g., English → Chinese)
3. Observe that Vue node text remains in the original language
4. Refresh page - translations now update correctly

Solution

Apply the same pattern used in PRs #5184 and #4213 to fix Vue node i18n reactivity. Two approaches:

Option 1: Add locale key to LGraphNode component

<template>
  <div :key="localeKey">
    <\!-- Vue node content -->
  </div>
</template>

<script setup>
const settingStore = useSettingStore()
const localeKey = computed(() => settingStore.get('Comfy.Locale'))
</script>

Option 2: Convert to Composition API

Replace $t() with useI18n() composition API:

<script setup>
const { t } = useI18n()
</script>
<template>
  <div>{{ t('Node Header Error') }}</div>
</template>

Related

• [backport 1.25] fix: Make bottom panel tab titles reactive to language changes #5184 - Fixed bottom panel tab titles reactivity
• fIx: side toolbar tab tooltip not reactive when changing locale #4213 - Fixed side toolbar tooltip reactivity
• Lots of widget translations are missing in the Vue nodes. #5697 - Missing widget translations in Vue nodes