Resizable

The component version of the vResizable directive.

Preview

width: 0
height: 0

TIP

The children of Resizable should always be a single element, and the width and height of the element should be 100%.

Config the width and height of the Resizable component instead of the children element.

TIP

You can use the as prop to change the tag of the Resizable component, and the default is div.

<script setup lang="ts">
import { Resizable } from 'vue-resizables'
</script>

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