API Overview

A map of the public surface. Follow a link for details.

`@snapgridjs/vue`

The main package. Composables (the headless layer), turnkey components, and a re-export of the engine types. Headless grids render inside a dnd-kit DragDropProvider; <GridLayout> bundles one.

Composables (headless)

Every composable returns Vue refs (ComputedRef / Ref) plus function refs you bind with :ref="setRef". Destructure the handle in <script setup> so templates auto-unwrap the refs.

Export	Returns
`useGridContainer`	`{ setRef, style, isDropTarget, group, controller }` — the grid host
`useGridItem`	`{ setRef, setHandleRef, style, isDragging, item }`
`useGridResizeHandle`	`{ setRef, handleProps, isResizing }`
`useGridPlaceholder`	`ComputedRef<GridPlaceholderInfo \| null>` — `{ item, style }` or `null`
`useContainerWidth`	`{ width, mounted, setRef }`
`useResponsiveLayout`	`{ breakpoint, cols, layout, onLayoutChange }`
`useGridController`	`GridController` — own a grid’s controller without a surface
`resolveController`	`GridController` — resolve a grid by its `group`

Components (turnkey)

Export	Purpose
`GridLayout`	Drop-in controlled grid with an `item` scoped slot (bundles the provider).
`ResponsiveGridLayout`	Per-breakpoint layouts.
`GridItem`	A positioned tile with default markup + handles.
`GridPlaceholder`	Default landing-cell marker.
`SnapGridGroup`	Shares one provider across sibling grids (cross-grid).

Re-exported dnd-kit primitives

For convenience (one import source), @snapgridjs/vue re-exports the dnd-kit pieces you commonly reach for with a grid: DragDropProvider (the drag context headless grids render inside), DragOverlay (an optional separate floating preview), useDraggable / useDroppable (e.g. an external-drop palette), and Feedback / PointerSensor / KeyboardSensor. Import them from @snapgridjs/vue rather than directly from @dnd-kit/* so they share snapgrid’s single dnd-kit instance — a second copy of @dnd-kit/vue is a separate DragDropProvider context, and drags from it never reach the grid.

There’s no overlay component to reach for: a dragged tile floats itself (dnd-kit lifts it into the top layer), so the common case needs nothing extra. The re-exported DragOverlay is the escape hatch for when the floating preview must differ from the tile — a clone, a ghost, or wholly custom markup.

To nest a non-grid drop zone inside a grid, nestedDropCollisionDetector and SNAPGRID_DROPPABLE_ATTR are exported too — pass them to your own useDroppable so the zone outranks the grid it sits in (innermost-wins). See the nesting guide.

Interop

snapMove(layout, event) — the reducer for dnd-kit interop: place a dragged item (a foreign useSortable card, or a tile crossing a grid ⇄ list seam) into a Layout at the pointer cell, with compaction. It resolves the destination grid’s geometry and compactor from the grid under the pointer, so the optional context is override-only. Pair it with removeItemWithCompactor to take a tile back out. Types: SnapMoveContext, SnapMoveEvent.

Utilities & compactors

DEFAULT_BREAKPOINTS, DEFAULT_BREAKPOINT_COLS, and the built-in compactors verticalCompactor, horizontalCompactor, noCompactor, getCompactor. Plus the layout-op and geometry helpers handy for interop, re-exported from @snapgridjs/core: insertItemWithCompactor, removeItemWithCompactor, toPositionParams, defaultGridConfig.

Types & config

Layout, LayoutItem, GridConfig, DragConfig, ResizeConfig, DropConfig, GridDropData, GridEventCallback, Compactor, CompactType, Breakpoints, BreakpointCols, ResponsiveLayouts, PositionParams, ResizeHandleAxis. See Types & config.

`@snapgridjs/core`

The framework-agnostic layout math: geometry, move/resize/insert/remove operations, and the drag session state machine. Most apps never import it directly. See Core engine & extras.

`@snapgridjs/dnd`

The framework-agnostic dnd-kit engine @snapgridjs/vue is built on — one per-manager drag/resize/cross-grid engine (attachEngine), the observable GridController render bridge, the snapMove interop reducer, and the collision/sensor/payload helpers a binding wires up. Comes in automatically with @snapgridjs/vue; import it directly only to build a binding for another framework.

`@snapgridjs/extras`

Optional packers: masonryCompactor, gravityCompactor, shelfCompactor, plus wrapCompactor and the fast O(n log n) compactors re-exported from react-grid-layout. See Core engine & extras.