Components

The component layer — a thin shell in the react-grid-layout style over the composables. <GridLayout> bundles the dnd-kit DragDropProvider, the container, the items, and the placeholder, so you never touch dnd-kit directly. For full control of the markup, or to compose with other dnd-kit draggables, use the composables. See the Component layer guide for usage; this page is the prop reference.

A dragged tile floats itself, so there’s no overlay component to render at either layer. If you need a separate floating preview, dnd-kit’s DragOverlay is re-exported from @snapgridjs/vue.

GridLayout

The turnkey controlled grid. Each item’s content comes from the item scoped slot (Vue has no keyed-children analog), rendered once per layout entry and keyed by the item’s i. It supplies its own DragDropProvider unless one already encloses it; nest several (or wrap them in SnapGridGroup) and they share one.

<script setup>
import { ref } from "vue";
import { GridLayout } from "@snapgridjs/vue";
 
const layout = ref([
  { i: "a", x: 0, y: 0, w: 2, h: 2 },
  { i: "b", x: 2, y: 0, w: 2, h: 2 },
]);
</script>
 
<template>
  <GridLayout
    :layout="layout"
    :width="1024"
    :grid-config="{ cols: 12, rowHeight: 60, margin: [12, 12] }"
    :resize-config="{ handles: ['se', 'e', 's'] }"
    @layout-change="layout = $event"
  >
    <template #item="{ item }">
      <div>{{ item.i }}</div>
    </template>
  </GridLayout>
</template>

The callbacks below are ordinary props, so bind them either way: :on-layout-change="fn" or the equivalent listener syntax @layout-change="fn".

Props

Slots & attributes

ResponsiveGridLayout

Switches columns and layout by breakpoint as width changes. See Responsive layouts.

Props

Item content comes from the same #item="{ item }" scoped slot, and class / style fall through as on GridLayout. This component deliberately doesn’t expose the grid id (or type): those attributes are dropped rather than forwarded, so two responsive grids in one SnapGridGroup can’t collide on a registry key.

GridItem

A positioned tile with stable classes (snapgrid-item, data-grid-id, data-dragging) and the item’s configured resize handles. Vue’s reactivity updates only the tiles whose state changed, so there’s nothing to memoize. Use it inside your own surface, or let GridLayout create them.

GridPlaceholder

Renders the landing-cell marker, or nothing when idle. Takes the grid’s group. Customize with class / style, or use useGridPlaceholder for full control.

SnapGridGroup

Shares one dnd-kit DragDropProvider across several sibling grids so tiles can be dragged between them. Takes only a default slot — a thin wrapper over DragDropProvider (nesting GridLayouts already shares a provider, so this is just explicit), and it honors an enclosing provider of your own. See Cross-grid dragging.