Vue Flow

https://vueflow.dev/
Admin
Vue Flow is a customizable Vue 3 component designed for creating interactive flowcharts and graphs...
Tokens:170,413
Snippets:1,422
Trust Score:7.7
Update:1 week ago
Show doc for...
Tokens:
Raw
### App.vue: Vue Flow transition example setup

Source: https://vueflow.dev/examples/transition.html

Main App.vue for the transition example. Sets up two nodes and a custom edge, uses useVueFlow's onInit to fit the view on node '1', and registers the custom edge component via the #edge-custom slot.

```vue
<script setup>
import { ref } from 'vue'
import { Position, VueFlow, useVueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import TransitionEdge from './TransitionEdge.vue'

const { onInit } = useVueFlow()

const nodes = ref([
  {
    id: '1',
    type: 'input',
    data: { label: 'DblClick me' },
    position: { x: 0, y: 0 },
    sourcePosition: Position.Right,
  },
  {
    id: '2',
    type: 'output',
    data: { label: 'DblClick me' },
    position: { x: 1000, y: 1000 },
    targetPosition: Position.Left,
  },
])

const edges = ref([{ id: 'e1-2', type: 'custom', source: '1', target: '2', style: { stroke: '#fff' } }])

onInit(({ fitView }) => {
  fitView({ nodes: ['1'] })
})
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges" class="transition-flow">
    <Background />

    <template #edge-custom="props">
      <TransitionEdge v-bind="props" />
    </template>
  </VueFlow>
</template>

<style>
```

--------------------------------

### Install @vue-flow/node-toolbar with yarn or npm

Source: https://vueflow.dev/guide/components/node-toolbar.html

Install the package using either yarn add or npm install. The commands are shown as alternatives.

```bash
yarn add @vue-flow/node-toolbar

# or
npm install @vue-flow/node-toolbar
```

--------------------------------

### Install Controls with yarn or npm

Source: https://vueflow.dev/guide/components/controls.html

Install the @vue-flow/controls package using either yarn add or npm install. The commands are shown as alternatives.

```bash
yarn add @vue-flow/controls

# or
npm install @vue-flow/controls
```

--------------------------------

### Quick start example with custom nodes and edges

Source: https://vueflow.dev/guide/getting-started.html

A complete Vue component that defines nodes and edges, including custom types, and binds them to custom components via slots. Requires the SpecialNode and SpecialEdge components.

```vue
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

// these components are only shown as examples of how to use a custom node or edge
// you can find many examples of how to create these custom components in the examples page of the docs
import SpecialNode from './components/SpecialNode.vue'
import SpecialEdge from './components/SpecialEdge.vue'

// these are our nodes
const nodes = ref([
  // an input node, specified by using `type: 'input'`
  { 
    id: '1',
    type: 'input', 
    position: { x: 250, y: 5 },
    // all nodes can have a data object containing any data you want to pass to the node
    // a label can property can be used for default nodes
    data: { label: 'Node 1' },
  },

  // default node, you can omit `type: 'default'` as it's the fallback type
  { 
    id: '2', 
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },

  // An output node, specified by using `type: 'output'`
  { 
    id: '3', 
    type: 'output', 
    position: { x: 400, y: 200 },
    data: { label: 'Node 3' },
  },

  // this is a custom node
  // we set it by using a custom type name we choose, in this example `special`
  // the name can be freely chosen, there are no restrictions as long as it's a string
  {
    id: '4',
    type: 'special', // <-- this is the custom node type name
    position: { x: 400, y: 200 },
    data: {
      label: 'Node 4',
      hello: 'world',
    },
  },
])

// these are our edges
const edges = ref([
  // default bezier edge
  // consists of an edge id, source node id and target node id
  { 
    id: 'e1->2',
    source: '1', 
    target: '2',
  },

  // set `animated: true` to create an animated edge path
  { 
    id: 'e2->3',
    source: '2', 
    target: '3', 
    animated: true,
  },

  // a custom edge, specified by using a custom type name
  // we choose `type: 'special'` for this example
  {
    id: 'e3->4',
    type: 'special',
    source: '3',
    target: '4',

    // all edges can have a data object containing any data you want to pass to the edge
    data: {
      hello: 'world',
    }
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges">
    <!-- bind your custom node type to a component by using slots, slot names are always `node-<type>` -->
    <template #node-special="specialNodeProps">
      <SpecialNode v-bind="specialNodeProps" />
    </template>

    <!-- bind your custom edge type to a component by using slots, slot names are always `edge-<type>` -->
    <template #edge-special="specialEdgeProps">
      <SpecialEdge v-bind="specialEdgeProps" />
    </template>
  </VueFlow>
</template>

<style>
/* import the necessary styles for Vue Flow to work */
@import '@vue-flow/core/dist/style.css';

/* import the default theme, this is optional but generally recommended */
@import '@vue-flow/core/dist/theme-default.css';
</style>
```

```vue
<script setup>
import { computed } from 'vue'
import { Position, Handle } from '@vue-flow/core'

const props = defineProps({
  position: {
    type: Object,
    required: true,
  }
})

const x = computed(() => `${Math.round(props.position.x)}px`)
const y = computed(() => `${Math.round(props.position.y)}px`)
</script>

<template>
  <div class="vue-flow__node-default">
    <div>{{ data.label }}</div>

    <div>
      {{ x }} {{ y }}
    </div>

    <Handle type="source" :position="Position.Bottom" />
  </div>
</template>
```

--------------------------------

### Install @vue-flow/minimap with yarn or npm

Source: https://vueflow.dev/guide/components/minimap.html

Install the minimap package using either yarn add or npm install. Choose the command that matches your package manager.

```bash
yarn add @vue-flow/minimap

# or
npm install @vue-flow/minimap
```

--------------------------------

### Install @vue-flow/node-resizer with yarn or npm

Source: https://vueflow.dev/guide/components/node-resizer.html

Install the Node Resizer package using either yarn add or npm install. Choose the command that matches your package manager.

```bash
yarn add @vue-flow/node-resizer

# or
npm install @vue-flow/node-resizer
```

--------------------------------

### Install @vue-flow/background with yarn or npm

Source: https://vueflow.dev/guide/components/background.html

Install the @vue-flow/background package using either yarn add or npm install. Choose the command that matches your package manager.

```bash
yarn add @vue-flow/background

# or
npm install @vue-flow/background
```

--------------------------------

### Connection validation example with custom nodes

Source: https://vueflow.dev/examples/edges/validation.html

A complete example showing how to set up nodes with validation data and use the onConnectStart event to log connection attempts. The nodes define valid targets and sources to control which connections are allowed.

```vue
<script setup>
import { ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import CustomInput from './CustomInput.vue'
import CustomNode from './CustomNode.vue'

const { addEdges } = useVueFlow()

const nodes = ref([
  {
    id: '0',
    type: 'input',
    position: { x: 0, y: 150 },
    // only target `B` is valid for this node
    data: { validTarget: 'B', validSource: '0' },
  },
  {
    id: 'A',
    type: 'custom',
    position: { x: 250, y: 0 },
    // no valid connections can be made for this node
    data: {},
  },
  {
    id: 'B',
    type: 'custom',
    position: { x: 250, y: 150 },
    // only source `0` is valid for this node
    data: { validTarget: 'B', validSource: '0' },
  },
  {
    id: 'C',
    type: 'custom',
    position: { x: 250, y: 300 },
    // no valid connections can be made for this node
    data: {},
  },
])

const edges = ref([])

function onConnectStart({ nodeId, handleType }) {
  console.log('on connect start', { nodeId, handleType })
}
</script>
```

--------------------------------

### Installation

Source: https://vueflow.dev/guide/components/controls.html

Install the @vue-flow/controls package using yarn or npm.

```APIDOC
## Installation

```bash
yarn add @vue-flow/controls

# or
npm install @vue-flow/controls
```
```

--------------------------------

### edges option example

Source: https://vueflow.dev/guide/vue-flow/config.html

Example of defining an array of edges with source and target, and passing both nodes and edges to VueFlow.

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

const nodes = ref([
  {
    id: '1',
    type: 'input',
    position: { x: 250, y: 5 },
    data: { label: 'Node 1' },
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },
  {
    id: '3',
    position: { x: 400, y: 100 },
    data: { label: 'Node 3' },
  },
  {
    id: '4',
    type: 'output',
    position: { x: 400, y: 200 },
    data: { label: 'Node 4' },
  },
])

const edges = ref([
  { 
    id: 'e1->3', 
    source: '1',
    target: '3' 
  },
  { 
    id: 'e1->2', 
    source: '1', 
    target: '2',  
  },
])
</script>
<template>
  <VueFlow :nodes="nodes" :edges="edges" />
</template>
```

--------------------------------

### App.vue - Setup and Template for Loopback Edge

Source: https://vueflow.dev/examples/edges/loopback.html

Defines a Vue component with a single node and a loopback edge. Uses useVueFlow to get updateEdgeData and updateNode functions. The template renders a VueFlow with a custom edge slot for 'loopback' type, passing all necessary props to the LoopbackEdge component.

```html
<script setup>
import { ref } from 'vue'
import { Background } from '@vue-flow/background'
import { Panel, Position, VueFlow, useVueFlow } from '@vue-flow/core'
import LoopbackEdge from './LoopbackEdge.vue'

const { updateEdgeData, updateNode } = useVueFlow()

const nodes = ref([
  {
    id: '1',
    position: { x: 0, y: 0 },
    data: { label: 'I connect to myself' },
  },
])

const pathType = ref('bezier')

const isHorizontal = ref(false)

const edges = ref([{ id: 'e1-1', type: 'loopback', source: '1', target: '1', data: { pathType: pathType.value } }])
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
    <template #edge-loopback="customEdgeProps">
      <LoopbackEdge
        :id="customEdgeProps.id"
        :source-x="customEdgeProps.sourceX"
        :source-y="customEdgeProps.sourceY"
        :target-x="customEdgeProps.targetX"
        :target-y="customEdgeProps.targetY"
        :source-position="customEdgeProps.sourcePosition"
        :target-position="customEdgeProps.targetPosition"
        :source-node="customEdgeProps.sourceNode"
        :target-node="customEdgeProps.targetNode"
        :data="customEdgeProps.data"
      />
    </template>

    <Background />

    <Panel>

```

--------------------------------

### App.vue - Drag and Drop Setup

Source: https://vueflow.dev/examples/dnd.html

Sets up the VueFlow component with drag and drop handlers, a dropzone background, and a sidebar. Uses useVueFlow to initialize state before mounting.

```vue
<script setup>
import { ref } from 'vue'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import DropzoneBackground from './DropzoneBackground.vue'
import Sidebar from './Sidebar.vue'
import useDragAndDrop from './useDnD'

const { onConnect, addEdges } = useVueFlow()

const { onDragOver, onDrop, onDragLeave, isDragOver } = useDragAndDrop()

const nodes = ref([])

onConnect(addEdges)
</script>

<template>
  <div class="dnd-flow" @drop="onDrop">
    <VueFlow :nodes="nodes" @dragover="onDragOver" @dragleave="onDragLeave">
      <DropzoneBackground
        :style="{
          backgroundColor: isDragOver ? '#e7f3ff' : 'transparent',
          transition: 'background-color 0.2s ease',
        }"
      >
        <p v-if="isDragOver">Drop here</p>
      </DropzoneBackground>
    </VueFlow>

    <Sidebar />
  </div>
</template>
```

--------------------------------

### selectionStart

Source: https://vueflow.dev/typedocs/interfaces/FlowEmits.html

Emitted when a selection starts. The payload is a MouseEvent.

```APIDOC
## FlowEmits(event: "selectionStart", selectionEvent: MouseEvent): void

### Description
Emitted when a selection starts.

### Parameters
- **event** (string literal) - Required - The event name: `"selectionStart"`
- **selectionEvent** (MouseEvent) - Required - The mouse event.

### Returns
`void`
```

--------------------------------

### getTransformForBounds example

Source: https://vueflow.dev/typedocs/functions/getTransformForBounds.html

Example usage of getTransformForBounds, showing how to obtain a viewport transform for given bounds and viewport dimensions. The example uses bounds { x: 0, y: 0, width: 100, height: 100 }, viewport size 1200x800, minZoom 0.5, maxZoom 2, and default padding.

```ts
const { x, y, zoom } = getViewportForBounds(
{ x: 0, y: 0, width: 100, height: 100},
1200, 800, 0.5, 2);
```

--------------------------------

### OnResizeStart

Source: https://vueflow.dev/typedocs/interfaces/OnResizeStart.html

The OnResizeStart interface describes the properties available when a resize operation starts.

```APIDOC
## Interface: OnResizeStart

### Description
The OnResizeStart interface defines the object passed to a resize start callback. It contains the drag event and the resize parameters.

### Properties

#### event
- **event** (`ResizeDragEvent`) - The drag event that triggered the resize start.

#### params
- **params** (`ResizeParams`) - The parameters associated with the resize operation.

```

--------------------------------

### App.vue - Setup and Helper Lines Logic

Source: https://vueflow.dev/examples/helper-lines.html

Main component that sets up Vue Flow, manages node state, and handles node changes to compute and apply helper lines for snapping.

```html
<script setup lang="ts">
import type { GraphNode, Node, NodeChange } from '@vue-flow/core'
import { VueFlow, useVueFlow } from '@vue-flow/core'
import { ref } from 'vue'
import HelperLines from './HelperLines.vue'
import { getHelperLines } from './utils'
import { initialNodes } from './initialElements'

const { applyNodeChanges } = useVueFlow()

const nodes = ref<Node[]>(initialNodes)

const helperLineHorizontal = ref<number | undefined>(undefined)
const helperLineVertical = ref<number | undefined>(undefined)

function updateHelperLines(changes: NodeChange[], nodes: GraphNode[]) {
  helperLineHorizontal.value = undefined
  helperLineVertical.value = undefined

  if (changes.length === 1 && changes[0].type === 'position' && changes[0].dragging && changes[0].position) {
    const helperLines = getHelperLines(changes[0], nodes)

    // if we have a helper line, we snap the node to the helper line position
    // this is being done by manipulating the node position inside the change object
    changes[0].position.x = helperLines.snapPosition.x ?? changes[0].position.x
    changes[0].position.y = helperLines.snapPosition.y ?? changes[0].position.y

    // if helper lines are returned, we set them so that they can be displayed
    helperLineHorizontal.value = helperLines.horizontal
    helperLineVertical.value = helperLines.vertical
  }

  return changes
}

function onNodesChange(changes: NodeChange[]) {
  const updatedChanges = updateHelperLines(changes, nodes.value as GraphNode[])

```

--------------------------------

### nodes option example

Source: https://vueflow.dev/guide/vue-flow/config.html

Example of defining an array of nodes with id, type, position, and data, and passing it to VueFlow via the nodes prop.

```vue
<script setup>
import { ref } from 'vue'  
import { VueFlow } from '@vue-flow/core'

const nodes = ref([
  { 
    id: '1', 
    type: 'input',
    position: { x: 250, y: 5 },
    data: { label: 'Node 1' },
  },
  { 
    id: '2', 
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
  },
  { 
    id: '3', 
    position: { x: 400, y: 100 },
    data: { label: 'Node 3' },
  },
  { 
    id: '4', 
    type: 'output',
    position: { x: 400, y: 200 },
    data: { label: 'Node 4' },
  },
])
</script>
<template>
  <VueFlow :nodes="nodes" />
</template>
```

--------------------------------

### Custom Edge Script Setup

Source: https://vueflow.dev/guide/getting-started.html

Script setup for a custom edge component using Vue Flow's BaseEdge, EdgeLabelRenderer, and getBezierPath. It defines the edge path and renders a custom label with data.hello.

```vue
<script setup lang="ts">
import { BaseEdge, EdgeLabelRenderer, getBezierPath, type EdgeProps } from '@vue-flow/core'
import { computed } from 'vue'

const props = defineProps<EdgeProps>()

const path = computed(() => getBezierPath(props))
</script>

<script lang="ts">
export default {
  inheritAttrs: false,
}
</script>

<template>
  <!-- You can use the `BaseEdge` component to create your own custom edge more easily -->
  <BaseEdge :path="path[0]" />

  <!-- Use the `EdgeLabelRenderer` to escape the SVG world of edges and render your own custom label in a `<div>` ctx -->
  <EdgeLabelRenderer>
    <div
      :style="{
        pointerEvents: 'all',
        position: 'absolute',
        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
      }"
      class="nodrag nopan"
    >
      {{ data.hello }}
    </div>
  </EdgeLabelRenderer>
</template>
```

--------------------------------

### Install Vue Flow with npm

Source: https://vueflow.dev/guide/getting-started.html

Adds the @vue-flow/core package to your project using npm.

```sh
$ npm add @vue-flow/core
```

--------------------------------

### Install Vue Flow with pnpm

Source: https://vueflow.dev/guide/getting-started.html

Adds the @vue-flow/core package to your project using pnpm.

```sh
$ pnpm add @vue-flow/core
```

--------------------------------

### Install Vue Flow with yarn

Source: https://vueflow.dev/guide/getting-started.html

Adds the @vue-flow/core package to your project using yarn.

```sh
$ yarn add @vue-flow/core
```

--------------------------------

### node-extent example

Source: https://vueflow.dev/guide/vue-flow/config.html

Shows how to set a custom extent on a specific node, overriding the global node-extent option.

```vue
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const nodes = ref([
  { id: '1', position: { x: 250, y: 5 } },
  {
    id: '2',
    extent: [[-100, -100], [100, 100]],
    position: { x: 100, y: 100 }
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" />
</template>
```

--------------------------------

### nodes-connectable example

Source: https://vueflow.dev/guide/vue-flow/config.html

Shows how to globally disable node connecting with the nodes-connectable prop, and override it per node with the connectable attribute.

```vue
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const nodesConnectable = ref(false)
  
const nodes = ref([
  { id: '1', position: { x: 250, y: 5 } },
  {
    id: '2',
    // This will overwrite the globally set option of nodes-connectable
    connectable: true,
    position: { x: 100, y: 100 }
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" :nodes-connectable="nodesConnectable" />
</template>
```

--------------------------------

### Basic Vue Flow usage with custom node template

Source: https://vueflow.dev/guide/components/node-toolbar.html

Shows a basic Vue Flow setup with a custom node template. It imports VueFlow and initialNodes, and defines a nodes ref.

```vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import initialNodes from './initialNodes'

// some nodes and edges
const nodes = ref(initialNodes)
</script>

<template>
  <VueFlow :nodes="nodes">
    <template #node-custom="nodeProps">
      <CustomNode :data="nodeProps.data" />
    </template>
  </VueFlow>
</template>
```

--------------------------------

### Edge Events with useVueFlow

Source: https://vueflow.dev/guide/edge.html

Example of binding edge event listeners using the useVueFlow composable, including onEdgeClick, onEdgeDoubleClick, onEdgeContextMenu, onEdgeMouseEnter, onEdgeMouseLeave, onEdgeMouseMove, onEdgeUpdateStart, onEdgeUpdate, and onEdgeUpdateEnd.

```APIDOC
## Edge Events with useVueFlow

### Description
Use the `useVueFlow` composable to access event handlers for edge events and bind listeners to them.

### Usage
vue
<script setup>
import { ref } from 'vue'  
import { VueFlow, useVueFlow } from '@vue-flow/core'

// useVueFlow provides access to the event handlers
const { 
  onEdgeClick,
  onEdgeDoubleClick,
  onEdgeContextMenu,
  onEdgeMouseEnter,
  onEdgeMouseLeave,
  onEdgeMouseMove,
  onEdgeUpdateStart,
  onEdgeUpdate,
  onEdgeUpdateEnd,
} = useVueFlow()
  
const nodes = ref([
  {
    id: '1',
    position: { x: 50, y: 50 },
    data: { label: 'Node 1', },
  },
  {
    id: '2',
    position: { x: 50, y: 250 },
    data: { label: 'Node 2', },
  },
])

const edges = ref([
  {
    id: 'e1->2',
    source: '1',
    target: '2',
  },
])
  
// bind listeners to the event handlers
onEdgeClick((event) => {
  console.log('edge clicked', event)
})

onEdgeDoubleClick((event) => {
  console.log('edge double clicked', event)
})

onEdgeContextMenu((event) => {
  console.log('edge context menu', event)
})
  
// ... and so on  
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges" />
</template>

```

--------------------------------

### Vue example using getStraightPath with BaseEdge

Source: https://vueflow.dev/guide/utils/edge.html

Use this snippet to create a straight edge in Vue Flow. It imports getStraightPath and BaseEdge from @vue-flow/core, computes the path from edge props, and renders it with BaseEdge.

```vue
<script lang="ts" setup>
import { computed } from "vue"
import { BaseEdge, getStraightPath, EdgeProps } from '@vue-flow/core'

const props = defineProps<EdgeProps>()

const edgePathParams = computed(() => getStraightPath(props))
</script>

<template>
  <BaseEdge :path="edgePathParams[0]" />
</template>
```

--------------------------------

### App.vue - Node Toolbar Example

Source: https://vueflow.dev/examples/nodes/node-toolbar.html

Defines a VueFlow instance with five nodes of type 'menu', each with a toolbar position and one with toolbarVisible set to true. The nodes are passed to the VueFlow component with fit-view-on-init.

```vue
<script setup>
import { ref } from 'vue'
import { Position, VueFlow } from '@vue-flow/core'
import ToolbarNode from './ToolbarNode.vue'

const nodes = ref([
  {
    id: '1',
    type: 'menu',
    data: { label: 'toolbar top', toolbarPosition: Position.Top },
    position: { x: 200, y: 0 },
  },
  {
    id: '2',
    type: 'menu',
    data: { label: 'toolbar right', toolbarPosition: Position.Right },
    position: { x: -50, y: 100 },
  },
  {
    id: '3',
    type: 'menu',
    data: { label: 'toolbar bottom', toolbarPosition: Position.Bottom },
    position: { x: 0, y: 200 },
  },
  {
    id: '4',
    type: 'menu',
    data: { label: 'toolbar left', toolbarPosition: Position.Left },
    position: { x: 200, y: 300 },
  },
  {
    id: '5',
    type: 'menu',
    data: { label: 'toolbar always open', toolbarPosition: Position.Top, toolbarVisible: true },
    position: { x: 0, y: -100 },
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" fit-view-on-init>

```

--------------------------------

### getBezierPath Example

Source: https://vueflow.dev/guide/utils/edge.html

Demonstrates using the getBezierPath function to compute a bezier path and bind it to a BaseEdge component. The function is called with props and a curvature of 0.5, and the resulting path is used in the template.

```vue
<script lang="ts" setup>
import { computed } from "vue"
import { BaseEdge, getBezierPath, EdgeProps } from '@vue-flow/core'

const props = defineProps<EdgeProps>()

const edgePathParams = computed(() => getBezierPath({ ...props, curvature: 0.5 }))
</script>

<template>
  <BaseEdge :path="edgePathParams[0]" />
</template>
```

--------------------------------

### TypeScript: Valid node configurations to fix NODE_INVALID

Source: https://vueflow.dev/guide/troubleshooting.html

Example of valid node configurations, including input, default, output, and custom types, to avoid the NODE_INVALID error.

```ts
// Here's an example of some valid node configurations
const nodes = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 } },
  { id: '3', type: 'output', label: 'Node 3', position: { x: 400, y: 200 } },
  { id: '4', type: 'special', label: 'Node 4', position: { x: 400, y: 200 } },
])
```

--------------------------------

### Apply changes manually with applyNodeChanges and applyEdgeChanges

Source: https://vueflow.dev/guide/controlled-flow.html

Use applyNodeChanges and applyEdgeChanges from useVueFlow to apply changes manually. This example shows applying node changes in an onChange handler.

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

const { applyNodeChanges, applyEdgeChanges } = useVueFlow();

const onChange = (changes) => {
  // apply changes manually
  applyNodeChanges(changes)
}
</script>
```

--------------------------------

### Use useNodeId composable to get current node ID

Source: https://vueflow.dev/changelog

Example from the changelog for version 1.31.0. Shows how to call useNodeId() to retrieve the current node's ID, logging it to the console. The comment indicates the expected output for a node with ID '1'.

```TypeScript
const nodeId = useNodeId();

console.log("nodeId", nodeId); // '1'
```

--------------------------------

### Custom edge with EdgeLabelRenderer for HTML label

Source: https://vueflow.dev/changelog

Complete Vue component example showing how to use `EdgeLabelRenderer` to render an edge label in HTML context, allowing HTML elements like buttons. Includes script setup with TypeScript, template with path and label, and styles for the button.

```vue
<script lang="ts" setup>
import type { EdgeProps, Position } from "@vue-flow/core";
import { EdgeLabelRenderer, getBezierPath, useVueFlow } from "@vue-flow/core";
import type { CSSProperties } from "vue";

interface CustomEdgeProps<T = any> extends EdgeProps<T> {
  id: string;
  sourceX: number;
  sourceY: number;
  targetX: number;
  targetY: number;
  sourcePosition: Position;
  targetPosition: Position;
  data: T;
  markerEnd: string;
  style: CSSProperties;
}

const props = defineProps<CustomEdgeProps>();

const { removeEdges } = useVueFlow();

const path = $computed(() => getBezierPath(props));
</script>

<script lang="ts">
export default {
  inheritAttrs: false,
};
</script>

<template>
  <path
    :id="id"
    :style="style"
    class="vue-flow__edge-path"
    :d="path[0]"
    :marker-end="markerEnd"
  />

  <EdgeLabelRenderer>
    <div
      :style="{
        pointerEvents: 'all',
        position: 'absolute',
        transform: `translate(-50%, -50%) translate(${path[1]}px,${path[2]}px)`,
      }"
      class="nodrag nopan"
    >
      <button class="edgebutton" @click="removeEdges([id])">×</button>
    </div>
  </EdgeLabelRenderer>
</template>

<style>
.edgebutton {
  border-radius: 999px;
  cursor: pointer;
}
.edgebutton:hover {
  box-shadow: 0 0 0 2px pink, 0 0 0 4px #f05f75;
}
</style>
```

--------------------------------

### useVueFlow basic usage with onInit, findNode, fitView, snapToGrid

Source: https://vueflow.dev/guide/composables.html

Shows how to use useVueFlow to access methods like onInit, findNode, fitView, and snapToGrid. The onInit callback receives the VueFlowStore instance, and you can modify node positions. Requires importing ref, useVueFlow, and VueFlow from '@vue-flow/core'.

```vue
<script setup>
import { ref } from 'vue'
import { useVueFlow, VueFlow } from '@vue-flow/core'

const { onInit, findNode, fitView, snapToGrid } = useVueFlow()

const nodes = ref([/* ... */])

const edges = ref([/* ... */])

// to enable snapping to grid
snapToGrid.value = true

// any event that is emitted from the `<VueFlow />` component can be listened to using the `onEventName` method
onInit((instance) => {
  // `instance` is the same type as the return of `useVueFlow` (VueFlowStore)
  
  fitView()
  
  const node = findNode('1')
  
  if (node) {
    node.position = { x: 100, y: 100 }
  }
})
</script>

<template>
  <VueFlow :nodes="nodes" :edges="edges" />
</template>
```

--------------------------------

### useVueFlow(options?)

Source: https://vueflow.dev/typedocs/functions/useVueFlow.html

Composable that provides access to a store instance with options.

```APIDOC
## useVueFlow(options?)

### Description
Composable that provides access to a store instance with options.

### Parameters
- **options** (`FlowProps`) - Optional - Options for the store instance.

### Returns
- **VueFlowStore** - A vue flow store instance.
```

--------------------------------

### modelValue option example (deprecated)

Source: https://vueflow.dev/guide/vue-flow/config.html

Example of using the deprecated modelValue prop with an array of elements (nodes and edges) and v-model.

```vue
<script setup>
import { ref } from 'vue'  
import { VueFlow } from '@vue-flow/core'

const elements = ref([
  { id: '1', type: 'input', label: 'Node 1', position: { x: 250, y: 5 } },
  { id: '2', label: 'Node 2', position: { x: 100, y: 100 }, },
  { id: '3', label: 'Node 3', position: { x: 400, y: 100 } },
  { id: '4', type: 'output', label: 'Node 4', position: { x: 400, y: 200 } },
  { id: 'e1-3', source: '1', target: '3' },
  { id: 'e1-2', source: '1', target: '2', animated: true },
])
</script>

<template>
  <VueFlow v-model="elements" />
</template>
```

--------------------------------

### getIncomers()

Source: https://vueflow.dev/typedocs/interfaces/Actions.html

Gets a node's incomers.

```APIDOC
## getIncomers(nodeOrId)

### Description
Gets a node's incomers.

### Method
getIncomers

### Parameters
- **nodeOrId** (string | Node<any, any, string>) - Required - The node id or node object.

### Returns
`GraphNode<any, any, string>[]`
```

--------------------------------

### useVueFlow(id?)

Source: https://vueflow.dev/typedocs/functions/useVueFlow.html

Composable that provides access to a store instance. If no id is provided, the store instance is injected from context. If no store instance is found in context, a new store instance is created and registered in storage.

```APIDOC
## useVueFlow(id?)

### Description
Composable that provides access to a store instance. If no id is provided, the store instance is injected from context. If no store instance is found in context, a new store instance is created and registered in storage.

### Parameters
- **id** (`string`) - Optional - The id of the store instance.

### Returns
- **VueFlowStore** - A vue flow store instance.
```

--------------------------------

### App.vue - Vue Flow math operation setup

Source: https://vueflow.dev/examples/math.html

Sets up the Vue Flow canvas with initial nodes and edges, and registers the custom node components. Uses fit-view-on-init to fit the graph on load.

```vue
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'
import { Background } from '@vue-flow/background'
import { initialEdges, initialNodes } from './initial-elements.js'
import ValueNode from './ValueNode.vue'
import OperatorNode from './OperatorNode.vue'
import ResultNode from './ResultNode.vue'

const nodes = ref(initialNodes)

const edges = ref(initialEdges)
</script>

<template>
  <VueFlow class=
```

--------------------------------

### getViewport

Source: https://vueflow.dev/guide/utils/instance.html

Gets position and zoom of the pane.

```APIDOC
## getViewport

### Description
Gets position and zoom of the pane.

### Method
getViewport

### Parameters
None.

### Response
Returns an object containing the position and zoom of the pane.
```

--------------------------------

### Import all features from vueflow package

Source: https://vueflow.dev/changelog

Shows how to import and use the new 'vueflow' package that exports all features (core + additional components) like VueFlow, Background, MiniMap, and Controls.

```vue
<script setup>
// `vueflow` pkg exports all features, i.e. core + additional components
import { VueFlow, Background, MiniMap, Controls } from "vueflow";
</script>

<template>
  <VueFlow>
    <Background />
    <MiniMap />
    <Controls />
  </VueFlow>
</template>
```

--------------------------------

### getViewport

Source: https://vueflow.dev/typedocs/interfaces/Actions.html

Gets the current viewport. Inherited from ViewportHelper.

```APIDOC
## getViewport

### Description
Gets the current viewport. Inherited from ViewportHelper.

### Method
getViewport

### Parameters
None

### Returns
`Viewport`
```

--------------------------------

### getHandleConnections()

Source: https://vueflow.dev/typedocs/interfaces/Actions.html

Gets all connections of a handle belonging to a node.

```APIDOC
## getHandleConnections({ id, nodeId, type })

### Description
Gets all connections of a handle belonging to a node.

### Method
getHandleConnections

### Parameters
- **id** (null | string) - Optional - The handle id.
- **nodeId** (string) - Required - The node id.
- **type** (HandleType) - Required - The handle type.

### Returns
`HandleConnection[]`
```

--------------------------------

### useHandle()

Source: https://vueflow.dev/typedocs/functions/useHandle.html

Documentation for the useHandle composable function.

```APIDOC
## useHandle()

### Description
This composable provides listeners for handle events. It is recommended to use the `<Handle />` component instead of this composable.

### Signature
`useHandle(__namedParameters: UseHandleProps): object`

### Parameters
- **__namedParameters** (`UseHandleProps`) - Required - The props for the handle.

### Returns
An object containing the following methods:

#### handleClick
- **handleClick** (`(event: MouseEvent) => void`) - A function that handles click events.

#### handlePointerDown
- **handlePointerDown** (`(event: MouseTouchEvent) => void`) - A function that handles pointer down events.
```

--------------------------------

### viewportChangeStart

Source: https://vueflow.dev/typedocs/interfaces/FlowEmits.html

Emitted when the viewport starts changing. The payload is a ViewportTransform.

```APIDOC
## FlowEmits(event: "viewportChangeStart", viewport: ViewportTransform): void

### Description
Emitted when the viewport starts changing.

### Parameters
- **event** (string literal) - Required - The event name: `"viewportChangeStart"`
- **viewport** (ViewportTransform) - Required - The viewport transform.

### Returns
`void`
```

--------------------------------

### App.vue - Main Vue Flow Setup

Source: https://vueflow.dev/examples/nodes

Defines the main component with nodes and edges, including a custom color-selector node and an output node. Uses presets for colors and a minimap stroke function.

```vue
<script setup>
import { ref, toRef } from 'vue'
import { MiniMap } from '@vue-flow/minimap'
import { Position, VueFlow } from '@vue-flow/core'
import ColorSelectorNode from './ColorSelectorNode.vue'
import OutputNode from './OutputNode.vue'
import { presets } from './presets.js'

const nodes = ref([
  {
    id: '1',
    type: 'color-selector',
    data: { color: presets.ayame },
    position: { x: 0, y: 50 },
  },
  {
    id: '2',
    type: 'output',
    position: { x: 350, y: 114 },
    targetPosition: Position.Left,
  },
])

const edges = ref([
  {
    id: 'e1a-2',
    source: '1',
    sourceHandle: 'a',
    target: '2',
    animated: true,
    style: {
      stroke: presets.ayame,
    },
  },
])

const colorSelectorData = toRef(() => nodes.value[0].data)

// minimap stroke color functions
function nodeStroke(n) {
  switch (n.type) {
    case 'input':
      return '#0041d0'
    case 'color-selector':
      return n.data.color

```

--------------------------------

### Before: Importing VueFlow, Background, MiniMap, Controls from @braks/vue-flow

Source: https://vueflow.dev/changelog/pathfinding-edge.html

Shows the old import path for Vue Flow components before the package scope change.

```javascript
import { VueFlow, Background, MiniMap, Controls } from "@braks/vue-flow";
```

--------------------------------

### getTransform

Source: https://vueflow.dev/typedocs/interfaces/Actions.html

Gets the viewport transform. Deprecated: use getViewport instead.

```APIDOC
## getTransform

### Description
Gets the viewport transform. Deprecated: use getViewport instead.

### Method
getTransform

### Parameters
None

### Returns
`ViewportTransform`
```

--------------------------------

### Node connectable prop with HandleConnectable values

Source: https://vueflow.dev/changelog

Example of setting the connectable prop on nodes to control handle connectivity. Values can be 'single', a callback, true, or false, allowing different connection behaviors per node.

```js
const nodes = ref([
  {
    id: "1",
    position: { x: 0, y: 0 },
    connectable: "single", // each handle is only connectable once (default node for example)
  },
  {
    id: "2",
    position: { x: 200, y: 0 },
    connectable: (node, connectedEdges) => {
      return true; // will allow any number of connections
    },
  },
  {
    id: "3",
    position: { x: 400, y: 0 },
    connectable: true, // will allow any number of connections
  },
  {
    id: "4",
    position: { x: 200, y: 0 },
    connectable: false, // will disable handles
  },
]);
```

--------------------------------

### project

Source: https://vueflow.dev/typedocs/interfaces/Actions.html

Projects a point from flow to screen coordinates. Inherited from ViewportHelper.

```APIDOC
## project

### Description
Projects a point from flow to screen coordinates. Inherited from ViewportHelper.

### Method
project

### Parameters
- **position** (XYPosition) - Required - The flow coordinates.

### Returns
`XYPosition`
```

--------------------------------

### Node Events via useVueFlow

Source: https://vueflow.dev/guide/node.html

Shows how to listen to node events using the useVueFlow composable, binding listeners to event handlers like onNodeDragStart, onNodeDrag, and onNodeClick.

```APIDOC
## Node Events via useVueFlow

### Description
Use the `useVueFlow` composable to access event handlers for node events and bind listeners to them.

### Usage
```vue
<script setup>
import { ref } from 'vue'  
import { VueFlow, useVueFlow } from '@vue-flow/core'

// useVueFlow provides access to the event handlers
const { 
  onNodeDragStart, 
  onNodeDrag,
  onNodeDragStop, 
  onNodeClick, 
  onNodeDoubleClick, 
  onNodeContextMenu, 
  onNodeMouseEnter, 
  onNodeMouseLeave, 
  onNodeMouseMove 
} = useVueFlow()
  
const nodes = ref([
  {
    id: '1',
    data: { label: 'Node 1' },
    position: { x: 50, y: 50 },
  },
])
  
// bind listeners to the event handlers
onNodeDragStart((event) => {
  console.log('Node drag started', event)
})

onNodeDrag((event) => {
  console.log('Node dragged', event)
})

onNodeDragStop((event) => {
  console.log('Node drag stopped', event)
})
  
// ... and so on  
</script>

<template>
  <VueFlow :nodes="nodes" />
</template>
```
```

--------------------------------

### nodes-draggable example

Source: https://vueflow.dev/guide/vue-flow/config.html

Shows how to globally disable node dragging with the nodes-draggable prop, and override it per node with the draggable attribute.

```vue
<script setup>
import { ref } from 'vue'
import { VueFlow } from '@vue-flow/core'

const nodesDraggable = ref(false)

const nodes = ref([
  { id: '1', position: { x: 250, y: 5 } },
  { 
    id: '2', 
    // This will overwrite the globally set option of nodes-draggable
    draggable: true, 
    position: { x: 100, y: 100 } 
  },
])
</script>

<template>
  <VueFlow :nodes="nodes" :nodes-draggable="nodesDraggable" />
</template>
```

--------------------------------

### FlowEmits(event, nodeDragEvent)

Source: https://vueflow.dev/typedocs/interfaces/FlowEmits.html

Emits an event when a node drag interaction occurs, such as drag start, drag, or drag stop.

```APIDOC
## FlowEmits(event, nodeDragEvent)

### Description
Emits an event when a node drag interaction occurs, such as drag start, drag, or drag stop.

### Parameters
- **event** (`"nodeDragStart" | "nodeDrag" | "nodeDragStop"`) - Required - The event name.
- **nodeDragEvent** (`NodeDragEvent`) - Required - The drag event associated with the node interaction.

### Returns
`void`
```

--------------------------------

### Custom Edge Component Template

Source: https://vueflow.dev/guide/getting-started.html

Template for a custom edge component that renders a source handle at the bottom. This is part of a custom edge example.

```html
<Handle type="source" :position="Position.Bottom" />
  </div>
</template>
```
Tokens:
Raw