How do i achieve nested nodes, i already use extent parent

[geekmaros]

I’m working on a project where I need to visually and functionally nest nodes. Here’s the behavior I’m trying to achieve:
• Each parent node (e.g. “Team” or “Node Group”) contains multiple child nodes.
• Each child node is a full Vue Flow node: it has its own id, type, Handles for connections, and is connectable like any other node.
• I use parentNode and extent: 'parent' to nest children inside the parent visually, and it works well for layout and dragging.

so far i have the node nested but i cant stack them onto one another as shown in the UI, they take an absolute style which makes it difficult
i know it has to do with the positioning too but just confused at this state

[bcakmakoglu]

For the use-case you've pictured it makes more sense to not use Subflows (not using parentId) and instead just list the "nodes" you want in a "parent" as an array in the parent nodes data object and render them as lists.

Something similar to this: https://codesandbox.io/p/devbox/thirsty-antonelli-7l8ngp?file=%2Fsrc%2FTableNode.vue&workspaceId=ws_7iZPUfEyQC7Podbs7wwbxV

[bcakmakoglu]

Glad to hear that 😄

[geekmaros]

@bcakmakoglu lastly

using the codesanbox you shared, the final behavour wa want is the parent node to also have handle and can make connections to other parent node, but it gets off when connecting the child nodes to each other

[bcakmakoglu]

I need more context for this. Self-closing edges are possible.
What does your node structure look like? any validations attached that block this connection?

[geekmaros]

Honestly i appreciate taking time to respond and not taking it for grante and apologies for the back and forth, i think the below images should give more clarity


[bcakmakoglu]

First thing is that each handle should have a unique id - you reuse agent.id for handles - scope them as :id="source-${agent.id}" and :id="target-${agent.id}" respectively.

Same for your non-agent handles.

Each handle needs a unique id.