Skip to content
On this page

Node Resizer

This is a resizer component for Vue Flow. It can be used to resize your nodes.

Installation

bash
yarn add @vue-flow/node-resizer
  
# or
npm install @vue-flow/node-resizer

Usage

vue
<script setup>
import { VueFlow } from '@vue-flow/core'
import initialElements from './initial-elements'

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

<template>
  <VueFlow v-model="elements" fit-view-on-init>
    <template #node-custom="nodeProps">
      <CustomNode :data="nodeProps.data" :label="nodeProps.label" />
    </template>
  </VueFlow>
</template>
vue
<script lang="ts" setup>
import { Handle, Position } from '@vue-flow/core'
import { NodeResizer } from '@vue-flow/node-resizer'

// make sure to include the necessary styles!
import '@vue-flow/node-resizer/dist/style.css'

defineProps(['label'])
</script>

<template>
  <NodeResizer min-width="100" min-height="30" />

  <Handle type="target" :position="Position.Left" />
  <div style="padding: 10px">{{ label }}</div>
  <Handle type="source" :position="Position.Right" />
</template>

When enabled, these props allow you to pan on drag and zoom on scroll using the MiniMap.

Props

NameDefinitionTypeOptionalDefault
nodeIdNode to attach the resizer tostringtrueNode id from context
colorColor of the resizer linesstringtrue-
handleClassNameExtra class for the resize handlestringtrue-
handleStyleAdditional styles for the resize handleCSSPropertiestrue-
lineClassNameExtra class for the resize linesnumbertrue-
lineStyleAdditional styles for the resize linesstringtrue-
isVisibleForce visibility of resizerbooleantruetrue
minWidthMin width of the resizer (can't resize below this value)numbertrue-
minHeightMin height of the resizer (can't resize below this value)numbertrue-

Emits

Name
resizeStart
resize
resizeEnd

Released under the MIT License.