# @vue-flow/node-resizer

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

Latest version **1.5.1** (published 2026-01-28) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vue-flow/node-resizer
pnpm add @vue-flow/node-resizer
yarn add @vue-flow/node-resizer
bun add @vue-flow/node-resizer
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 1.5.1 |
| Published | 2026-01-28 |
| First published | 2022-12-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 161 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6906 |
| Author | Burak Cakmakoglu |
| Maintainers | braks |
| Keywords | vue, flow, diagram, editor, graph, node, link, port, slot, vue3, composition-api, vue-flow, vueflow, typescript |

## Links

- npm: https://www.npmjs.com/package/@vue-flow/node-resizer
- Repository: https://github.com/bcakmakoglu/vue-flow/packages/plugins/node-resizer
- Homepage: https://github.com/bcakmakoglu/vue-flow#readme
- Issues: https://github.com/bcakmakoglu/vue-flow/issues
- npm.io page: https://npm.io/package/@vue-flow/node-resizer

## Dependencies (2)

- [d3-drag](https://npm.io/package/d3-drag.md) ^3.0.0
- [d3-selection](https://npm.io/package/d3-selection.md) ^3.0.0

## Alternatives

- [apollo-link-http-common](https://npm.io/package/apollo-link-http-common.md) — 879.0K weekly downloads
- [react-relay](https://npm.io/package/react-relay.md) — 336.8K weekly downloads
- [relay-test-utils](https://npm.io/package/relay-test-utils.md) — 181.6K weekly downloads
- [@vendure/core](https://npm.io/package/@vendure/core.md) — 14.8K weekly downloads
- [@pnpm/deps.graph-sequencer](https://npm.io/package/@pnpm/deps.graph-sequencer.md) — 13.4K weekly downloads

## Recent versions

- 1.5.1 (latest) — 2026-01-28
- 1.5.0 — 2025-06-12
- 1.4.0 — 2024-06-12
- 1.3.6 — 2023-12-12
- 1.3.5 — 2023-10-06
- 1.3.4 — 2023-08-21
- 1.3.3 — 2023-07-10
- 1.3.2 — 2023-04-26
- 1.3.1 — 2023-04-11
- 1.3.0 — 2023-03-08
- 1.2.2 — 2023-02-24
- 1.2.1 — 2023-02-15
- 1.2.0 — 2023-02-07
- 1.1.0 — 2023-02-05
- 1.0.2 — 2023-01-18
- … 2 more at https://npm.io/package/@vue-flow/node-resizer/versions

## README

# Vue Flow: Node Resizer Component

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

## 🛠 Setup

```bash
# install
$ yarn add @vue-flow/node-resizer

# or
$ npm i --save @vue-flow/node-resizer
```

## 🎮 Quickstart

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

---
_Source: https://npm.io/package/@vue-flow/node-resizer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._