Vue Grid Layout

2.4.0 · maintenance · verified Sun Apr 19

Vue Grid Layout is a component library for Vue.js that provides a draggable and resizable grid layout system. It enables developers to create interactive dashboards and editable layouts where users can freely arrange, resize, and manage widgets. The current stable version, 2.4.0, supports Vue 2.2+. The library is actively maintained with a focus on bug fixes and incremental feature enhancements, without a strict release cadence. It offers features such as static widgets, bounds checking for drag and resize operations, layout serialization and restoration, automatic RTL support, and responsive design capabilities. It was heavily inspired by React-Grid-Layout. For Vue 3, there are community-maintained forks and dedicated libraries like `vue-grid-layout-v3`, `vue3-grid-layout`, and `@marsio/vue-grid-layout`, as the original `vue-grid-layout` does not officially support Vue 3.

Common errors

Warnings

Install

Imports

Quickstart

This quickstart demonstrates a basic Vue 2 application using `vue-grid-layout` with several draggable and resizable grid items. It shows how to define a layout programmatically and handle `resized` and `moved` events.

<template>
  <div id="app">
    <h1>Vue Grid Layout Example</h1>
    <GridLayout
      :layout.sync="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :use-css-transforms="true"
      :prevent-collision="false"
    >
      <GridItem
        v-for="item in layout"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        :key="item.i"
        @resized="resizedEvent"
        @moved="movedEvent"
      >
        <span class="text">{{ item.i }}</span>
      </GridItem>
    </GridLayout>
  </div>
</template>

<script>
import { GridLayout, GridItem } from 'vue-grid-layout';

export default {
  components: {
    GridLayout,
    GridItem,
  },
  data() {
    return {
      layout: [
        { x: 0, y: 0, w: 2, h: 2, i: '0' },
        { x: 2, y: 0, w: 2, h: 4, i: '1' },
        { x: 4, y: 0, w: 2, h: 5, i: '2' },
        { x: 6, y: 0, w: 2, h: 3, i: '3' },
        { x: 8, y: 0, w: 2, h: 3, i: '4' },
        { x: 10, y: 0, w: 2, h: 3, i: '5' },
      ],
    };
  },
  methods: {
    resizedEvent(i, newH, newW, newHPx, newWPx) {
      console.log(`Resized item ${i}, new H: ${newH}, new W: ${newW}`);
    },
    movedEvent(i, newX, newY) {
      console.log(`Moved item ${i}, new X: ${newX}, new Y: ${newY}`);
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
.vue-grid-item {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
.vue-grid-item .text {
  font-size: 24px;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>

view raw JSON →