What is vue-grid-layout?

jbaysolutions/vue-grid-layout — explained in plain English

Analysis updated 2026-06-24

★ 7,416JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((vue-grid-layout))
    What it does
      Drag panels anywhere
      Resize widgets
      Save and restore layout
      Responsive breakpoints
    Tech Stack
      JavaScript
      Vue 2
    Use Cases
      Analytics dashboards
      Customizable home screens
    Audience
      Web developers
      Dashboard builders

mindmap root((vue-grid-layout)) What it does Drag panels anywhere Resize widgets Save and restore layout Responsive breakpoints Tech Stack JavaScript Vue 2 Use Cases Analytics dashboards Customizable home screens Audience Web developers Dashboard builders

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Build a drag-and-drop analytics dashboard where users can rearrange and resize data widgets.

USE CASE 2

Create a customizable home screen with moveable panels that saves its layout between sessions.

USE CASE 3

Add a resizable multi-panel editor layout to a document or design tool built with Vue.js.

What is it built with?

JavaScriptVue.js

How does it compare?

	jbaysolutions/vue-grid-layout	krausest/js-framework-benchmark	reactjs/react-modal
Stars	7,416	7,411	7,411
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	hard	easy
Complexity	2/5	3/5	2/5
Audience	developer	developer	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 30min

Requires a Vue 2 project, full documentation lives on a separate website, not in the README.

So what is it?

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.

Copy-paste prompts

Prompt 1

I'm using vue-grid-layout in Vue 2. Show me how to define an initial layout with three widgets and save it to localStorage when the user moves them.

Prompt 2

Using vue-grid-layout, how do I add a new widget to the grid at runtime without resetting the entire layout?

Prompt 3

Show me how to make some panels static and non-moveable in vue-grid-layout while keeping others draggable.

Prompt 4

How do I set up responsive breakpoints in vue-grid-layout so the grid rearranges on mobile screens?

Frequently asked questions