vue-grid-layout-v3 is a comprehensive and responsive grid layout system for Vue.js, enabling draggable and resizable widgets within a grid structure. It is heavily inspired by React-Grid-Layout and provides features such as static widgets, bounds checking during dragging and resizing, the ability to add or remove widgets dynamically, layout serialization, and automatic RTL support. The package specifically targets Vue 3.2+ environments, with the current stable version being 3.1.2. It maintains an active release cadence, providing minor updates and bug fixes for the 3.x branch. Key differentiators include its robust feature set for creating interactive dashboards and configurable layouts, making it a powerful tool for applications requiring dynamic user interfaces, and its clear lineage from a popular React library. This version represents a modern adaptation for the Vue 3 ecosystem, distinct from earlier versions supporting Vue 1 and Vue 2.
npm install vue-grid-layout-v3Verified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates how to set up a basic draggable and resizable grid layout using `vue-grid-layout-v3` in a Vue 3 application. It initializes a responsive grid with several items, allowing users to interactively rearrange and resize them, and logs layout changes.
For `GridLayout`, exposed properties changed from `{ placeholderRef, emitter }` to `{ el, placeholderEl, emitter, placeholder }`. For `GridItem`, exposed properties changed from `{ calcXY, domRef }` to `{ calcXY, el }`. Update any direct access to these exposed properties in your parent components or templates accordingly.For Vue 2.1.10+, use `vue-grid-layout` version 2.4.0. For Vue 2.1.10 and below, use version 2.1.3. For Vue 1, use version 1.0.3. Ensure you install the correct package version matching your Vue major version.
Ensure you are on the latest `vue-grid-layout-v3` version (3.1.x or newer) which should have improved RTL support. If issues persist, consider custom CSS workarounds or report the bug to the maintainers.
Ensure you `import { GridLayout, GridItem } from 'vue-grid-layout-v3';` and register them in your component's `components` option, or globally via `app.component('GridLayout', GridLayout)`.Review the breaking changes documentation. If you're accessing exposed properties, update your code to reflect the new structure. For `GridLayout`, `emitter` is still exposed but the overall exposed object changed from `{ placeholderRef, emitter }` to `{ el, placeholderEl, emitter, placeholder }`.Ensure the parent container has defined dimensions and that `GridLayout` is rendered within an existing element. Consider using `v-if` or `v-show` with a condition that ensures data readiness before rendering the grid, or use `nextTick` if manipulating layout after data changes.