v-resizable

v-resizable

This Vue (2.x / 3.x) plugin adds a v-resizable directive to make an element resizable. Unlike the CSS resize property, the element may be resized from any side or corner, and a resize event is emitted.

🚀 Live Demo

Installation & Usage

Install the package using npm/yarn.

npm i v-resizable --save

Add the plugin to your app.

// main.js / main.ts

import VResizable from 'v-resizable'

Vue.use(VResizable)

Add the directive to an element.

<!-- Component.vue -->

<div v-resizable></div>

Including as a Script

Alternatively, you can include v-resizable alongside vue using script tags.

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/v-resizable"></script>

Options

Handles

You can set which handles are available for resizing by adding modifiers to the directive.

<!-- only allow resizing the width via the left and right edges -->
<div v-resizable.l.r></div>

<!-- only allow resizing from the bottom-right corner -->
<div v-resizable.br></div>

<!-- enable all handles; this is the same as providing no modifiers -->
<div v-resizable.t.r.b.l.tr.br.bl.tl></div>

Constrain the width and height

You can specify a minWidth, maxWidth, minHeight, and maxHeight in pixels.

<div
  v-resizable="{ minWidth: 300, minHeight: 300, maxWidth: 1000, maxHeight: 1000 }"
></div>

Modify the handle areas

If necessary, you can change the pixel width/height of the invisible handles (default: 12), as well as their z-index (default: 100).

<div v-resizable="{ handleWidth: 16, handleZIndex: 1000 }"></div>

Overriding Defaults

To avoid having to repeat the same option values in your app, you can override the default values.

When using Vue.use, pass the default values as the second argument.

// main.js / main.ts

Vue.use(VResizable, {
  handles: ['l', 'r'],
  minWidth: 300,
  minHeight: 300,
  maxWidth: 1000,
  maxHeight: 1000,
  handleWidth: 16,
  handleZIndex: 1000,
})

When including v-resizable as a global script, you can instead call VResizable.setDefaults. Be sure to set defaults before creating your Vue instance.

VResizable.setDefaults({
  handles: ['l', 'r'],
  minWidth: 300,
  minHeight: 300,
  maxWidth: 1000,
  maxHeight: 1000,
  handleWidth: 16,
  handleZIndex: 1000,
})

Listening for resize Events

The v-resizable directive also implements emitting resize events.

<div v-resizable @resize="myResizeHandlerMethod"></div>