Comfy-Org / Comfy-Org/ComfyUI_frontend
The translation isn't updated in real time when switching languages. It needs a refresh.
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## 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.
https://github.com/user-attachments/assets/3790af58-4e1b-4245-9bb2-89da6f0bf564
## 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](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/views/GraphView.vue#L157) but Vue nodes don't re-render.
**Components affected:**
- [NodeHeader.vue:3](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/renderer/extensions/vueNodes/components/NodeHeader.vue#L3) - `$t('Node Header Error')`
- [NodeContent.vue](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/renderer/extensions/vueNodes/components/NodeContent.vue) - `$t('Node Content Error')`
- [NodeWidgets.vue](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/renderer/extensions/vueNodes/components/NodeWidgets.vue) - `$t('Node Widgets Error')`
- [LGraphNode.vue](https://github.com/Comfy-Org/ComfyUI_frontend/blob/main/src/renderer/extensions/vueNodes/components/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
```vue
<\!-- Vue node content -->
const settingStore = useSettingStore()
const localeKey = computed(() => settingStore.get('Comfy.Locale'))
```
### Option 2: Convert to Composition API
Replace `$t()` with `useI18n()` composition API:
```vue
const { t } = useI18n()
```
## Related
- #5184 - Fixed bottom panel tab titles reactivity
- #4213 - Fixed side toolbar tooltip reactivity
- #5697 - Missing widget translations in Vue nodes
Contributor guide
Assessment
This issue has not been assessed yet.