Easy Resizable Library For Vue – resizables

resizables is an easy-to-use resizable library designed for Vue-powered apps. It provides a vResizable directive and a Resizable component to help developers create resizable elements with ease.

How to use it:

1. Use vResizable directive.

import { vResizable } from 'vue-resizables'

<template>
  <div
    v-resizable="{
      edge: {
        bottom: true,
        right: true,
      },
      border: true,
    }"
  />
</template>

2. Use Resizable component.

import { Resizable } from 'vue-resizables'

<template>
  <Resizable
    class="w-300px h-300px" :config="{
      edge: {
        right: true,
        bottom: true,
      },
      border: true,
    }"
  >
    <div class="w-full h-full">
      <!-- content -->
    </div>
  </Resizable>
</template>

3. Available configs.

export const defaultConfig: ResizableConfig = {
  edge: {
    [BaseEdge.LEFT]: false,
    [BaseEdge.TOP]: false,
    [BaseEdge.RIGHT]: false,
    [BaseEdge.BOTTOM]: false,
    [ExtendedEdge.TOP_LEFT]: false,
    [ExtendedEdge.TOP_RIGHT]: false,
    [ExtendedEdge.BOTTOM_LEFT]: false,
    [ExtendedEdge.BOTTOM_RIGHT]: false,
  },
  border: false,
  throttleTime: 15,
  size: {
    min: {
      width: 0,
      height: 0,
    },
    max: {
      width: Number.POSITIVE_INFINITY,
      height: Number.POSITIVE_INFINITY,
    },
  },
}

Preview:

Changelog:

v0.4.0 (11/19/2023)

• Update

Download Details:

Author: alexzhang1030

Live Demo: https://vue-resizables.vercel.app/

Download Link: https://github.com/alexzhang1030/vue-resizables/archive/refs/heads/main.zip

Official Website: https://github.com/alexzhang1030/vue-resizables

Install & Download:

# Yarn
$ yarn add vue-resizables

# NPM
$ npm i vue-resizables