Skip to content

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
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>
<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>
<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.