{"id":12487,"library":"vue-grid-layout-v3","title":"Vue Grid Layout v3","description":"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.","status":"active","version":"3.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/merfais/vue-grid-layout-v3","tags":["javascript","grid","vuejs","drag","draggable","resize","resizable","fluid","responsive"],"install":[{"cmd":"npm install vue-grid-layout-v3","lang":"bash","label":"npm"},{"cmd":"yarn add vue-grid-layout-v3","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-grid-layout-v3","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency, required for component rendering and reactivity. Specifically requires Vue 3.2+.","package":"vue","optional":false}],"imports":[{"note":"Use named import for `GridLayout` component in Vue 3 applications. CommonJS `require` is not supported for modern Vue component usage.","wrong":"const GridLayout = require('vue-grid-layout-v3')","symbol":"GridLayout","correct":"import { GridLayout } from 'vue-grid-layout-v3'"},{"note":"Use named import for `GridItem` component. Directly importing `.vue` files is generally not recommended for library components.","wrong":"import GridItem from 'vue-grid-layout-v3/GridItem.vue'","symbol":"GridItem","correct":"import { GridItem } from 'vue-grid-layout-v3'"},{"note":"Vue 3 applications use `createApp` for initialization, not a global `Vue` constructor, and components are typically imported from `.vue` files.","wrong":"import Vue from 'vue';","symbol":"App","correct":"import { createApp } from 'vue';\nimport App from './App.vue';"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport { GridLayout, GridItem } from 'vue-grid-layout-v3';\n\nconst app = createApp({\n components: {\n GridLayout,\n GridItem,\n },\n setup() {\n const layout = ref([\n { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },\n { x: 2, y: 0, w: 2, h: 4, i: '1', resizable: true },\n { x: 4, y: 0, w: 2, h: 5, i: '2', draggable: true },\n { x: 6, y: 0, w: 2, h: 3, i: '3', minW: 2, maxW: 4 },\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 const onLayoutUpdated = (newLayout) => {\n console.log('Layout updated:', newLayout);\n };\n\n return {\n layout,\n onLayoutUpdated,\n };\n },\n template: `\n
\n \n \n {{ item.i }}\n \n \n
\n `\n});\n\napp.mount('#app');","lang":"typescript","description":"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."},"warnings":[{"fix":"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.","message":"Upgrading from `vue-grid-layout-v3` version 3.0 to 3.1 introduces breaking changes in the exposed properties of `GridLayout` and `GridItem` components. Ensure your component references and prop destructuring are updated.","severity":"breaking","affected_versions":">=3.1.0"},{"fix":"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.","message":"This package (`vue-grid-layout-v3`) is specifically for Vue 3. Using it with Vue 2.x or Vue 1.x will lead to compatibility issues and runtime errors. Separate versions of the library exist for legacy Vue environments.","severity":"gotcha","affected_versions":"<3.0.0"},{"fix":"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.","message":"Resizing does not work correctly with RTL (Right-to-Left) layouts in specific older versions of `vue-grid-layout`. While v3 generally supports RTL, this was a known issue in earlier versions.","severity":"gotcha","affected_versions":"<3.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"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)`.","cause":"The `GridLayout` or `GridItem` components were not properly imported or registered in your Vue application.","error":"[Vue warn]: Failed to resolve component: GridLayout"},{"fix":"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 }`.","cause":"This error often occurs after upgrading from `vue-grid-layout-v3` v3.0 to v3.1 if you were accessing the `emitter` property from the component's exposed data, as the structure of exposed properties changed.","error":"TypeError: Cannot read properties of undefined (reading 'emitter')"},{"fix":"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.","cause":"This can happen if the grid layout component attempts to calculate dimensions before its DOM element is fully rendered or available, often during initial component mounting or rapid state changes.","error":"Cannot read properties of null (reading 'offsetWidth')"}],"ecosystem":"npm"}