Resize Element With Drag And Drop – VueResizable


A small and configurable resizable component that allows the user to resize an element using drag and drop.

How to use it:

1. Import and register the VueResizable component.

import VueResizable from 'vue-resizable'

export default {
  name: "YourApp",
  components: {VueResizable}

2. Insert a resizable element into your component.

    <div class="resizable-content"></div>

3. Default props to config the resizable component.

width: {
  default: 200,
  type: [Number, String]
minWidth: {
  default: 0,
  type: Number
maxWidth: {
  default: undefined,
  type: Number,
height: {
  default: 200,
  type: [Number, String]
minHeight: {
  default: 0,
  type: Number
maxHeight: {
  default: undefined,
  type: Number
left: {
  default: 0,
  type: [Number, String]
top: {
  default: 0,
  type: [Number, String]
active: {
  default: () => ['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'],
  validator: (val) => ['r', 'rb', 'b', 'lb', 'l', 'lt', 't', 'rt'].filter(value => val.indexOf(value) !== -1).length === val.length,
  type: Array
fitParent: {
  default: false,
  type: Boolean
dragSelector: {
  default: undefined,
  type: String

4. Event handlers.

  • mount(eventName,left,top,width,height): Called after the component is mounted
  • destroy(eventName,left,top,width,height): Called before the component is destroyed
  • resize:start(eventName,left,top,width,height): Called after clicking on one of the active handlers
  • resize:move(eventName,left,top,width,height): Called when a handler is being dragged
  • resize:end(eventName,left,top,width,height): Called when the mouse button was released after resize
  • drag:start(eventName,left,top,width,height): Called after clicking on one of the drag elements
  • drag:move(eventName,left,top,width,height): Called when a drag element is being dragged
  • drag:end(eventName,left,top,width,height): Called when the mouse button was released after drag


Resize Element With Drag And Drop - VueResizable


v2.0.0 (03/08/2021)

  • Added ’emits’

v2.0.0 (03/06/2021)

  • Update for Vue 3

v1.2.5 (09/16/2020)

  • disabled attributes do not change inline styles

v1.2.3 (08/09/2020)

  • touch events support

v1.2.2 (08/02/2020)

  • update

v1.2.1 (07/31/2020)

  • remove old drag classes

Download Details:

Author: nikitasnv

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm install vue-resizable --save

You Might Be Interested In:


Add Comment