vue-flow-debug

Name: vue-flow-debug
Availability: InStock
Author: endlessblink

Diagnose nested Vue Flow parent-child relationships and coordinate calculations.

Updated Nov 29, 2025

Search Tags:#debugging #containment #coordinates #drag #parent-child #vue-flow #nested-nodes

Ready to run

npx skills add https://github.com/endlessblink/flow-state --skill vue-flow-debug

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vue-flow-debug
Source: https://github.com/endlessblink/flow-state/tree/main/.claude/skills/vue-flow-debug
Command: npx skills add https://github.com/endlessblink/flow-state --skill vue-flow-debug

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Debugging and stabilizing nested Vue Flow canvases by ensuring parent-child links, coordinate systems, and drag interactions behave predictably. This skill guides you to verify node.position semantics, compute correct world coordinates, and align visual rendering with stored data.

Core Features & Use Cases

Understand node.position vs node.computedPosition for root and child nodes.
Diagnose and fix incorrect parentNode assignments to ensure children move with parents.
Validate drag/drop and containment logic for nested groups.

Quick Start

Provide a debugging plan to identify and fix mismatched parent-child relationships and coordinate calculations in a nested Vue Flow canvas.

Frequently Asked Questions about vue-flow-debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

Why do my Vue Flow child nodes not move with their parent group during dragging?▼

Child nodes fail to move with parent groups in Vue Flow due to incorrect parentNode assignments or mismatched coordinate systems. You must validate parent links and ensure relative positions are correctly computed and synced with the store.

How do I calculate relative coordinates for nested Vue Flow nodes?▼

To calculate relative coordinates for nested Vue Flow nodes, differentiate between node.position and node.computedPosition. Compute the correct world coordinates for children by validating their relative positions against the parent group's location.

What is the difference between node.position and node.computedPosition in Vue Flow?▼

In Vue Flow, node.position defines the relative coordinates for root and child nodes, while node.computedPosition represents the absolute world coordinates. Understanding this distinction is crucial for aligning visual rendering with stored data.

How to debug containment logic for Vue Flow nested groups?▼

Debug Vue Flow containment logic by applying a clear protocol to validate drag and drop interactions within nested groups. Verify that parent-child relationships and coordinate calculations behave predictably across complex canvases.

Does Vue Flow support complex canvases with multiple nested parent-child groups?▼

Vue Flow supports complex canvases with multiple nested parent-child groups. You must implement proper containment logic and use correct Vue Flow APIs to sync state with the store for predictable grouping behaviors.