Guide
Your application owns the layout data. During drag and resize interactions, GridLayout emits a valid update and waits for the new value to come back through its props.
Build your first grid
01Install and importAdd the package and choose local or global component registration.02Bind a controlled layoutDefine the item coordinates, bind
v-model:layout, and choose a slot.03Run the basic exampleDrag and resize the items, then open and copy the minimal example.04Apply a complete patternCopy the controlled, responsive, programmatic, headless, or Core API workflow.Check the API
Look here when you need the exact type, default value, or event signature.
API indexFind a public v2 symbol or choose the right API for a task.PropertiesGridLayout, GridItem, and GridBackground inputs, defaults, types, compactors, and position strategies.EventsLayout updates and interaction lifecycle events for moving and resizing items.MethodsProgrammatic component commands and controlled transaction receipts.ComposablesHeadless layout, responsive state, and container-width observation.Operation contractsResult statuses, rejection reasons, revisions, and structured errors.Core APIDOM-free validation, normalization, collision, compaction, and geometry.