Getting Started

Install

pnpm

pnpm add @liaogn/vue-drag-resize-rotate

npm

npm install @liaogn/vue-drag-resize-rotate

yarn

yarn add @liaogn/vue-drag-resize-rotate

Usage

Global registration

// main.ts
import { createApp } from 'vue'
import VueDragResizeRotate from '@liaogn/vue-drag-resize-rotate'
import '@liaogn/vue-drag-resize-rotate/style.css'
import App from './App.vue'

createApp(App).use(VueDragResizeRotate).mount('#app')

Local import

<script setup lang="ts">
import VueDragResizeRotate from '@liaogn/vue-drag-resize-rotate'
import '@liaogn/vue-drag-resize-rotate/style.css'
</script>

<template>
  <VueDragResizeRotate :w="200" :h="150" :x="50" :y="50">
    <div>Hello</div>
  </VueDragResizeRotate>
</template>

The component registers globally as <vdr>.

Minimal example

<template>
  <vdr :w="200" :h="150" :x="50" :y="50" @dragging="onChange" @resizing="onChange">
    <div>drag · resize · rotate</div>
  </vdr>
</template>

<script setup lang="ts">
function onChange(pos) {
  console.log(pos)
}
</script>

Next steps

• Props API — all configurable options
• Events — event list and pos payload
• Nesting — recursive data and slot nesting
• Boundary Limits — constrain drag, resize, and rotate
• Theming — customize with CSS variables
• Examples — interactive demos