Vue Resizables

Appearance

v-resizable ​

Also provide a component version: Resizable.

Preview ​

width: 0
height: 0
vue
<script setup lang="ts">
import { vResizable } from 'vue-resizables'

// optional if only need the logic
import 'vue-resizables/style'
</script>

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

Or you can globally register this directive(but will lose the type support):

ts
import { vResizable } from 'vue-resizables'
import 'vue-resizables/style'

createApp(App).directive('resizable', vResizable).mount('#app')

Config ​

See config for more details.

Custom border ​

width: 0
height: 0
vue
<template>
  <div
    v-resizable="{
      edge: {
        bottom: true,
        right: true,
      },
      border: {
        render: true,
        style: {
          headless: true,
          class: 'bg-lightblue',
          size: 2,
        },
      },
    }"
  />
</template>