prosekit/vue/resizable

import {
  ResizableHandle,
  ResizableRoot,
} from 'prosekit/vue/resizable'

<ResizableRoot>
  <img src="..." />
  <ResizableHandle>...</ResizableHandle>
</ResizableRoot>

Props for the ResizableHandle Vue component.

position?: "left" | "right" | "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right"

The position of the handle.

Default

Section titled “Default”

"bottom-right"

Props for the ResizableRoot Vue component.

width?: number | null

The width of the resizable element.

Default

Section titled “Default”

null

height?: number | null

The height of the resizable element.

Default

Section titled “Default”

null

aspectRatio?: number | null

The aspect ratio of the resizable element.

Default

Section titled “Default”

null

onResizeStart?: (event: ResizeStartEvent) => void

Emitted when a resize operation starts.

onResizeEnd?: (event: ResizeEndEvent) => void

Emitted when a resize operation ends.

const ResizableHandle: DefineSetupFnComponent<ResizableHandleProps & HTMLAttributes>

A Vue component that renders an prosekit-resizable-handle custom element.

const ResizableRoot: DefineSetupFnComponent<ResizableRootProps & HTMLAttributes>

A Vue component that renders an prosekit-resizable-root custom element.