Vue 3 Grid

comins-grid-layout@0.3.0Vue 3

Use DashboardGrid and useDashboardGrid from /vue with Vue 3.5 or later. widgets, columns and refreshVersion are refs unwrapped in templates. Bind layout-commit to commands.applyLayoutSnapshot to commit drag results. The default slot renders content; the actions slot renders custom controls.

Runnable example

Resize to 8×3, then restore the original 4×2 geometry. Dimensions respect the current column count and widget constraints.

Preview

Code

GridVueDemo.vue

<script setup lang="ts">
import { DashboardGrid, useDashboardGrid } from 'comins-grid-layout/vue';
import 'gridstack/dist/gridstack.min.css';
import 'comins-grid-layout/styles.css';
const props = withDefaults(defineProps<{ lang?: string }>(), { lang: 'ko' });
const { widgets, columns, commands, refreshVersion } = useDashboardGrid({
  initialColumns: 12,
  initialWidgets: [{ id: 'first', title: 'A', layout: { id: 'first', x: 0, y: 0, w: 4, h: 2 } }],
});
</script>
<template>
  <div class="demo" data-demo="grid-vue">
    <div class="demo-toolbar">
      <button @click="commands.resizeWidget('first', { w: 8, h: 3 })">{{ props.lang === 'ko' ? '8×3으로 변경' : 'Resize to 8×3' }}</button>
      <button @click="commands.restoreWidget('first')">{{ props.lang === 'ko' ? '크기 복원' : 'Restore size' }}</button>
      <button @click="commands.resetLayout()">{{ props.lang === 'ko' ? '초기화' : 'Reset' }}</button>
    </div>
    <DashboardGrid :widgets="widgets" :columns="columns" :refresh-key="refreshVersion"
      :engine-options="{ cellHeight: 50, margin: 6, animate: false }" :show-controls="false"
      editable movable resizable @layout-commit="commands.applyLayoutSnapshot">
      <template #default="{ widget }"><div class="widget-content">{{ widget.title }}</div></template>
    </DashboardGrid>
    <pre data-grid-state>{{ JSON.stringify(commands.serializeLayout(), null, 2) }}</pre>
  </div>
</template>

Support boundaries

Browser CSR is supported. Nuxt/SSR, Vanilla/Svelte renderers and mixed React/Vue transfers are unsupported. KeepAlive deactivation and unmount clean up the engine, observers and drag-in. See Core and Vue 3 for installation, CSS, slots and emits.