A draggable and resizable grid layout, as a Vue component.

Usage no npm install needed!

<script type="module">
  import vueGridLayoutEoi from '';


Vue Grid Layout


Documentation Website

What is Vue Grid Layout?

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


  • 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


  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.


import { GridLayout, GridItem } from 'vue-grid-layout-eoi';
import 'vue-grid-layout-eoi/dist/style.css';

export default {
  components: { GridLayout, GridItem },
  data() {
    return {
      layout: {

See also the official demo: