{"id":12488,"library":"vue-grid-layout","title":"Vue Grid Layout","description":"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.","status":"maintenance","version":"2.4.0","language":"javascript","source_language":"en","source_url":"https://github.com/jbaysolutions/vue-grid-layout","tags":["javascript","grid","vuejs","drag","draggable","resize","resizable","fluid","responsive"],"install":[{"cmd":"npm install vue-grid-layout","lang":"bash","label":"npm"},{"cmd":"yarn add vue-grid-layout","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-grid-layout","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides core drag and resize functionality for grid items.","package":"interactjs","optional":false}],"imports":[{"note":"This is the pattern for global registration of the plugin, making <GridLayout> and <GridItem> components available application-wide. Primarily for Vue 2 applications.","wrong":"import { GridLayout, GridItem } from 'vue-grid-layout'; // This is for component-level import, not global plugin registration.","symbol":"VueGridLayout","correct":"import VueGridLayout from 'vue-grid-layout';\nVue.use(VueGridLayout);"},{"note":"Recommended approach for importing components in a single-file component (SFC) or specific contexts, allowing explicit declaration and local registration.","wrong":"const { GridLayout, GridItem } = require('vue-grid-layout'); // CommonJS syntax, less common in modern Vue 2 projects.\nimport VueGridLayout from 'vue-grid-layout'; // This imports the default export for plugin installation, not individual components.","symbol":"GridLayout, GridItem","correct":"import { GridLayout, GridItem } from 'vue-grid-layout';"}],"quickstart":{"code":"<template>\n  <div id=\"app\">\n    <h1>Vue Grid Layout Example</h1>\n    <GridLayout\n      :layout.sync=\"layout\"\n      :col-num=\"12\"\n      :row-height=\"30\"\n      :is-draggable=\"true\"\n      :is-resizable=\"true\"\n      :vertical-compact=\"true\"\n      :use-css-transforms=\"true\"\n      :prevent-collision=\"false\"\n    >\n      <GridItem\n        v-for=\"item in layout\"\n        :x=\"item.x\"\n        :y=\"item.y\"\n        :w=\"item.w\"\n        :h=\"item.h\"\n        :i=\"item.i\"\n        :key=\"item.i\"\n        @resized=\"resizedEvent\"\n        @moved=\"movedEvent\"\n      >\n        <span class=\"text\">{{ item.i }}</span>\n      </GridItem>\n    </GridLayout>\n  </div>\n</template>\n\n<script>\nimport { GridLayout, GridItem } from 'vue-grid-layout';\n\nexport default {\n  components: {\n    GridLayout,\n    GridItem,\n  },\n  data() {\n    return {\n      layout: [\n        { x: 0, y: 0, w: 2, h: 2, i: '0' },\n        { x: 2, y: 0, w: 2, h: 4, i: '1' },\n        { x: 4, y: 0, w: 2, h: 5, i: '2' },\n        { x: 6, y: 0, w: 2, h: 3, i: '3' },\n        { x: 8, y: 0, w: 2, h: 3, i: '4' },\n        { x: 10, y: 0, w: 2, h: 3, i: '5' },\n      ],\n    };\n  },\n  methods: {\n    resizedEvent(i, newH, newW, newHPx, newWPx) {\n      console.log(`Resized item ${i}, new H: ${newH}, new W: ${newW}`);\n    },\n    movedEvent(i, newX, newY) {\n      console.log(`Moved item ${i}, new X: ${newX}, new Y: ${newY}`);\n    },\n  },\n};\n</script>\n\n<style>\n#app {\n  font-family: Avenir, Helvetica, Arial, sans-serif;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-align: center;\n  color: #2c3e50;\n  margin-top: 60px;\n}\n.vue-grid-item {\n  background-color: #f0f0f0;\n  border: 1px solid #ccc;\n  box-sizing: border-box;\n}\n.vue-grid-item .text {\n  font-size: 24px;\n  text-align: center;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n}\n</style>\n","lang":"javascript","description":"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."},"warnings":[{"fix":"For Vue 3 projects, consider using a dedicated Vue 3 compatible library like `vue-grid-layout-v3` (npm `vue-grid-layout-v3`) or `@marsio/vue-grid-layout` (npm `@marsio/vue-grid-layout`), or investigate other grid layout solutions tailored for Vue 3.","message":"This package, `vue-grid-layout` (version 2.x), is designed for Vue 2 applications. It does not officially support Vue 3. Using it in a Vue 3 project will lead to compatibility issues and errors. Multiple community-maintained forks exist for Vue 3 compatibility, such as `vue-grid-layout-v3`, `vue3-grid-layout`, and `@marsio/vue-grid-layout`.","severity":"breaking","affected_versions":">=2.x"},{"fix":"Ensure your `vue-grid-layout` version matches your Vue.js installation. Consult the README for the exact version compatibility matrix for legacy Vue environments.","message":"The package has specific version requirements for Vue.js. Version 2.4.0 supports Vue 2.2+. Older Vue versions require specific older releases of `vue-grid-layout` (e.g., 2.1.3 for Vue <= 2.1.10 and 1.0.3 for Vue 1.x).","severity":"breaking","affected_versions":"<2.2.0"},{"fix":"Always use the latest stable version (2.4.0) for the most reliable responsive behavior. If on an older version, review the changelog for responsive-related fixes that might address your issue.","message":"Responsive layout behavior and specific feature implementations have seen several fixes across minor versions. For instance, initial responsive layouts and breakpoint change events were added in 2.3.8, and a regression in responsive layout handling was fixed in 2.3.11. Item resizing might behave unexpectedly in responsive mode in older versions.","severity":"gotcha","affected_versions":"<2.3.11"},{"fix":"Ensure you are using the correct event name: `@resized` for item-specific resizing and consider using `@container-resized` (or similar, check current docs) for layout container resizing events. Always refer to the latest documentation for event names.","message":"The `resized` event, which is emitted when the container (e.g., browser window) changes size, was renamed from a previous, potentially inconsistent name in version 2.3.7. Using the old event name will not work or might lead to unexpected behavior.","severity":"deprecated","affected_versions":"<2.3.7"},{"fix":"Ensure your build tooling (e.g., Webpack, Rollup) is configured to handle ES6 module imports and tree-shaking effectively. For older or legacy build setups, this might require specific adjustments or using an older `vue-grid-layout` version (e.g., 2.3.9 or earlier) if compatibility issues arise.","message":"From version 2.3.10, `interact.js` (the underlying drag-and-resize library) is imported as ES6 modules. This change was implemented to optimize bundle size but might affect build configurations or environments that do not fully support ES6 modules or tree-shaking correctly.","severity":"gotcha","affected_versions":">=2.3.10"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Upgrade to `vue-grid-layout` version 2.3.10 or later, as this issue was specifically fixed in that release.","cause":"Older versions had a known bug where resizing functionality was broken for grid items in Right-to-Left (RTL) mode.","error":"Resizing a grid item in RTL mode isn't working / Grid items are misaligned in RTL."},{"fix":"This bug was addressed in version 2.3.8. Ensure you are using `vue-grid-layout` version 2.3.8 or newer. Also, ensure that your `layout` array is updated correctly when items are added or removed.","cause":"This error can occur when grid items are removed from the layout, and the underlying `interact.js` object associated with them is not properly cleaned up or is accessed after removal.","error":"Error: Cannot read property 'interactObj' of undefined"},{"fix":"Update to `vue-grid-layout` version 2.3.10 or later, where this specific bug was fixed. Ensure proper handling of `v-if` or `v-show` on `GridItem` components.","cause":"A regression in previous versions caused grid items to lose their correct dimensions when toggling their visibility in a responsive layout.","error":"Grid item's size changes unexpectedly when hiding/displaying it again in responsive mode."},{"fix":"Upgrade to `vue-grid-layout` version 2.3.9 or newer. If you need to support Vue 2.1.10 and below, use version 2.1.3 of `vue-grid-layout`.","cause":"Earlier versions (e.g., around 2.3.9) had a bug in the plugin installation mechanism, preventing components from being correctly registered when `Vue.use(VueGridLayout)` was called.","error":"Plugin installation fails or components are not registered globally."}],"ecosystem":"npm"}