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:

Easy Resizable Library For Vue

Changelog:

v0.7.1 (03/27/2024)

  • Bugfix: Pointerup should listen on document

v0.7.0 (03/26/2024)

  • A better way to handle operating lock

v0.6.2 (03/07/2024)

  • Bugfixes

v0.6.1 (03/05/2024)

  • Bugfixes

v0.6.0 (03/04/2024)

  • Add onSizeChange callback option
  • Bug Fixes

v0.5.0 (01/28/2024)

  • Add scale property and allow to directly use composable without placing in hook

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
Tags:

Add Comment