Comfy-Org / Comfy-Org/ComfyUI_frontend

Make node outputs reactive in Vue

Open
#7,547 0 comments 0 reactions 1 assignee Claimed by @AustinMroz View on GitHub
area:nodes area:vue-migration
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

## Context

Follow-up from PR #7546 which made node inputs reactive.

Currently, outputs are returned as a shallow copy (`[...node.outputs]`) while inputs use a `shallowReactive` wrapper with property interception. This creates an inconsistency in reactivity tracking.

## What needs to be done

Apply the same reactive pattern to outputs that was implemented for inputs in PR #7546:

1. Create `reactiveOutputs` using `shallowReactive(node.outputs ?? [])`
2. Define a property on the node with getter/setter that intercepts mutations
3. Update the VueNodeData return to use `reactiveOutputs` instead of the shallow copy

This ensures mutations to the outputs array are properly tracked by Vue, maintaining consistency with how inputs are handled.

## Related

- PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7546
- Discussion: https://github.com/Comfy-Org/ComfyUI_frontend/pull/7546#discussion_r2621739275
- File: `src/composables/graph/useGraphNodeManager.ts`
- Requested by: @DrJKL

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-7547-Make-node-outputs-reactive-in-Vue-2cb6d73d3650815ab904e40a7023f9e7) by [Unito](https://www.unito.io)

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.