Skip to main content
The NodeResizer component adds interactive resize handles to nodes, allowing users to dynamically resize them.

​
Installation

npm install @vue-flow/node-resizer
Don’t forget to import the styles: import '@vue-flow/node-resizer/dist/style.css'

​
Usage

<script setup>
import { VueFlow } from '@vue-flow/core'
import { NodeResizer } from '@vue-flow/node-resizer'
import '@vue-flow/node-resizer/dist/style.css'

const nodes = ref([
  {
    id: '1',
    type: 'custom',
    position: { x: 100, y: 100 }
  }
])
</script>

<template>
  <VueFlow :nodes="nodes">
    <template #node-custom="{ data }">
      <NodeResizer />
      <div>{{ data.label }}</div>
    </template>
  </VueFlow>
</template>

​
Props

​
nodeId
string
ID of the node to resize. If not provided, the component will use the node ID from context (when used inside a node template).
​
color
string
Color of the resize handles and lines. Accepts any valid CSS color value.
​
handleClassName
string
Custom CSS class name for resize handles (corner controls).
​
handleStyle
CSSProperties
Custom inline styles for resize handles.
​
lineClassName
string
Custom CSS class name for resize lines (edge controls).
​
lineStyle
CSSProperties
Custom inline styles for resize lines.
​
isVisible
boolean
default:"true"
Show or hide the resize controls.
​
minWidth
number
Minimum width constraint for the node.
​
minHeight
number
Minimum height constraint for the node.
​
maxWidth
number
Maximum width constraint for the node.
​
maxHeight
number
Maximum height constraint for the node.
​
keepAspectRatio
boolean | number
Maintain aspect ratio during resize.
  • true - Keep the original aspect ratio
  • false - Allow free resizing
  • number - Use a specific aspect ratio value
​
shouldResize
ShouldResize
Callback function to control whether resizing should occur.
type ShouldResize = (
  event: ResizeDragEvent,
  params: ResizeParamsWithDirection
) => boolean

interface ResizeParamsWithDirection {
  x: number
  y: number
  width: number
  height: number
  direction: number[]
}
​
autoScale
boolean
default:"true"
Automatically scale the resize controls with the zoom level.

​
Events

​
@resize-start
(event: OnResizeStart) => void
Emitted when resizing starts.
interface OnResizeStart {
  event: ResizeDragEvent
  params: ResizeParams
}

interface ResizeParams {
  x: number
  y: number
  width: number
  height: number
}
​
@resize
(event: OnResize) => void
Emitted during resizing.
interface OnResize {
  event: ResizeDragEvent
  params: ResizeParamsWithDirection
}
​
@resize-end
(event: OnResizeEnd) => void
Emitted when resizing ends.
interface OnResizeEnd {
  event: ResizeDragEvent
  params: ResizeParams
}

​
Examples

​
Basic Resizable Node

<template #node-custom>
  <NodeResizer :min-width="100" :min-height="50" />
  <div>Resizable Content</div>
</template>

​
Constrained Resize

<NodeResizer 
  :min-width="100" 
  :max-width="400"
  :min-height="50" 
  :max-height="300"
/>

​
Keep Aspect Ratio

<NodeResizer :keep-aspect-ratio="true" />

​
Custom Aspect Ratio

<NodeResizer :keep-aspect-ratio="16/9" />

​
Custom Colors and Styles

<NodeResizer 
  color="#ff6b6b"
  :handle-style="{ width: '12px', height: '12px' }"
  handle-class-name="custom-handle"
/>

​
Handle Resize Events

<script setup>
function onResizeStart({ params }) {
  console.log('Start size:', params.width, params.height)
}

function onResize({ params }) {
  console.log('Resizing:', params.width, params.height)
}

function onResizeEnd({ params }) {
  console.log('Final size:', params.width, params.height)
}
</script>

<template>
  <NodeResizer
    @resize-start="onResizeStart"
    @resize="onResize"
    @resize-end="onResizeEnd"
  />
</template>

​
Conditional Resizing

<script setup>
function shouldResize(event, params) {
  // Only allow resizing if width is less than 500px
  return params.width < 500
}
</script>

<template>
  <NodeResizer :should-resize="shouldResize" />
</template>

​
TypeScript

import type { 
  NodeResizerProps, 
  ResizeParams,
  ResizeParamsWithDirection,
  OnResizeStart,
  OnResize,
  OnResizeEnd,
  ShouldResize,
  ControlPosition,
  ControlLinePosition
} from '@vue-flow/node-resizer'

export enum ResizeControlVariant {
  Line = 'line',
  Handle = 'handle',
}

​
Exports

  • NodeResizer - The main NodeResizer component with handles and lines
  • NodeResizeControl - Individual resize control component for custom implementations
  • NodeResizerProps - TypeScript interface for NodeResizer props
  • ResizeControlVariant - Enum for resize control variants

Build docs developers (and LLMs) love

Get started for freeTalk to us