vue-grid-layout

vue-grid-layout is a JavaScript library for building dashboard-style grid interfaces in Vue.js applications. It lets users drag panels around the screen and resize them, similar to how widgets work in tools like analytics dashboards or customizable home screens. Developers add this library to a Vue.js project and it handles all the positioning logic, collision detection, and layout state management automatically.

The main features described in the README are: draggable widgets, resizable widgets, static (non-moveable) widgets, boundary checking so items cannot be dragged off the grid, the ability to add or remove items without rebuilding the whole layout, saving and restoring a layout as serialized data, and responsive behavior that adapts to different screen sizes. There is also support for right-to-left text layouts, though resizing in that mode had a known issue at the time of the listed version.

The library was heavily inspired by a similar library called React-Grid-Layout, which does the same thing for React-based projects. The current version (2.4.0) supports Vue 2.2 and above. Separate older branches exist for Vue 1 and for legacy browsers such as Internet Explorer 11, so teams stuck on older stacks can still use an earlier release.

A few external projects are listed in the README as real-world examples of products built using this library, giving a sense of the typical use case: data dashboards and document tools.

The README is concise and links out to a dedicated documentation website for full installation and configuration details. No installation steps or code examples appear in the README itself.