Skip to main content
useNode provides access to a node’s data, its parent node, connected edges, and DOM element reference. This composable is designed to be used within custom node components.

​
Usage

<script setup>
import { useNode } from '@vue-flow/core'

const { node, parentNode, connectedEdges, nodeEl } = useNode()

console.log('Current node:', node)
console.log('Parent node:', parentNode.value)
console.log('Connected edges:', connectedEdges.value)
console.log('DOM element:', nodeEl.value)
</script>

<template>
  <div>
    <h3>{{ node.data.label }}</h3>
    <p>Connected to {{ connectedEdges.length }} edges</p>
  </div>
</template>

​
Signature

function useNode<Data = ElementData, CustomEvents = any>(
  id?: string
): {
  id: string
  node: GraphNode<Data, CustomEvents>
  nodeEl: Ref<HTMLDivElement | null>
  parentNode: ComputedRef<GraphNode | undefined>
  connectedEdges: ComputedRef<GraphEdge[]>
}

​
Parameters

​
id
string
The ID of the node to access. If not provided, the node ID is automatically injected from the component context.Note: When used inside a custom node component, you typically don’t need to provide this parameter.

​
Return Value

​
id
string
The ID of the node
​
node
GraphNode<Data, CustomEvents>
The complete node object with all its properties:
  • id - Node identifier
  • position - X and Y coordinates
  • data - Custom data object
  • type - Node type
  • label - Optional label
  • parentNode - ID of parent node (if nested)
  • selected - Whether the node is selected
  • dragging - Whether the node is being dragged
  • And other node properties
​
nodeEl
Ref<HTMLDivElement | null>
A Vue ref to the node’s DOM element. Useful for measurements or direct DOM manipulation.
​
parentNode
ComputedRef<GraphNode | undefined>
A computed reference to the parent node if this node is nested. Returns undefined if there’s no parent.
​
connectedEdges
ComputedRef<GraphEdge[]>
A computed array of all edges connected to this node (both incoming and outgoing).

​
Examples

​
Custom Node with Connected Edges Count

<script setup>
import { useNode } from '@vue-flow/core'

const { node, connectedEdges } = useNode()

const incomingCount = computed(() => 
  connectedEdges.value.filter(edge => edge.target === node.id).length
)

const outgoingCount = computed(() => 
  connectedEdges.value.filter(edge => edge.source === node.id).length
)
</script>

<template>
  <div class="custom-node">
    <div class="node-header">{{ node.data.label }}</div>
    <div class="node-stats">
      <span>In: {{ incomingCount }}</span>
      <span>Out: {{ outgoingCount }}</span>
    </div>
  </div>
</template>

​
Accessing Parent Node Data

<script setup>
import { useNode } from '@vue-flow/core'

const { node, parentNode } = useNode()

const isNested = computed(() => !!parentNode.value)
const parentLabel = computed(() => parentNode.value?.data.label ?? 'No parent')
</script>

<template>
  <div :class="{ nested: isNested }">
    <h4>{{ node.data.label }}</h4>
    <small v-if="isNested">Parent: {{ parentLabel }}</small>
  </div>
</template>

​
Using Node DOM Reference

<script setup>
import { useNode } from '@vue-flow/core'
import { watch } from 'vue'

const { node, nodeEl } = useNode()

// Watch for selection and scroll into view
watch(() => node.selected, (selected) => {
  if (selected && nodeEl.value) {
    nodeEl.value.scrollIntoView({ 
      behavior: 'smooth', 
      block: 'center' 
    })
  }
})
</script>

​
Typed Node Data

<script setup lang="ts">
import { useNode } from '@vue-flow/core'

interface TaskNodeData {
  title: string
  status: 'pending' | 'completed' | 'failed'
  assignee?: string
}

const { node } = useNode<TaskNodeData>()

const statusColor = computed(() => {
  switch (node.data.status) {
    case 'completed': return 'green'
    case 'failed': return 'red'
    default: return 'orange'
  }
})
</script>

<template>
  <div class="task-node" :style="{ borderColor: statusColor }">
    <h3>{{ node.data.title }}</h3>
    <p v-if="node.data.assignee">Assignee: {{ node.data.assignee }}</p>
    <span class="status">{{ node.data.status }}</span>
  </div>
</template>

​
Notes

  • When used without an ID parameter, this composable must be called within a custom node component or a child component of a custom node
  • If the node is not found, an error will be emitted through the Vue Flow error system
  • The parentNode and connectedEdges are computed properties that automatically update when the flow state changes
  • Type parameters allow you to type the node’s data and custom events for better TypeScript support

Build docs developers (and LLMs) love

Get started for freeTalk to us