Comfy-Org / Comfy-Org/ComfyUI_frontend

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

Open
#5,698 0 comments 0 reactions 0 assignees View on GitHub
area:i18n area:vue-migration
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()

{{ t('Node Header Error') }}

```

## Related
- #5184 - Fixed bottom panel tab titles reactivity
- #4213 - Fixed side toolbar tooltip reactivity
- #5697 - Missing widget translations in Vue nodes

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.