What is Vue Grid Layout?

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout

Features

• Draggable widgets
• Resizable widgets
• Static widgets
• Bounds checking for dragging and resizing
• Widgets may be added or removed without rebuilding grid
• Layout can be serialized and restored
• Automatic RTL support (resizing not working with RTL on 2.2.0)
• Responsive

Current version: 3.0.0-beta1 (Supports Vue 3.x)

Modification notice

Code modified by Carter Li, from the official vue3-webpack branch

Changes:

1. Migrated to TypeScript, and found a bug when migrating
2. Lots of code refacters, dead / commented code removals, ES6+ syntax migration.
3. Use resize-observer-polyfill instead of element-resize-detector for better performance
4. General dependencies upgrades, also removed some unused dependencies.

Usage

<template>
<grid-layout
  v-model:layout="layout"
  ...
/>
</template>
<script>
import { GridLayout, GridItem } from 'vue-grid-layout-eoi';
import 'vue-grid-layout-eoi/dist/style.css';

export default {
  components: { GridLayout, GridItem },
  data() {
    return {
      layout: {
        ...
      },
    };
  },
}
</script>

See also the official demo: https://github.com/CarterLi/vue-grid-layout/blob/master/src/demo/App.vue#L39