vue-grid-layout-v3

A draggable and resizable grid layout, as a Vue component.
429,159 113
Install
npm install vue-grid-layout-v3
Latest Version:3.1.2
Vue:3
Last Updated:Dec 4, 2024
Links: GitHub  ·  npm
Maintainer: coffeeb

What is Vue Grid Layout?

vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired by React-Grid-Layout

Features

  • Draggable widgets
  • Resizable widgets
  • Static widgets
  • Bounds checking for dragging and resizing
  • Widgets may be added or removed without rebuilding grid
  • Layout can be serialized and restored
  • Automatic RTL support (resizing not working with RTL on 2.2.0)
  • Responsive

Current version: 3.1.0 (Supports Vue 3.2+)

upgrading from version 3.0 to version 3.1 has some break change
  • GridLayout expose changed: { placeholderRef, emitter } -> { el, placeholderEl, emitter, placeholder }
  • GridItem expose changed: { calcXY, domRef } -> { calcXY, el }
For legacy browsers, like IE11, use version 2.3.12-legacy
For Vue 2.1.10+ use version 2.4.0
For Vue 2.1.10 and below use version 2.1.3
For Vue 1 use version 1.0.3

Documentation

Check out the Documentation Website

Projects using vue-grid-layout

Know of others? Create a PR to let me know!

Contribute

If you have a feature request, please add it as an issue or make a pull request.

3.0 version Developed by CoffeeBi

Developed by JBay Solutions

Related Packages

vue-grid-layout

A draggable and resizable grid layout, as a Vue component.

2,102,559 7,398
vue3-grid-layout-next

A draggable and resizable grid layout, as a Vue component.

773,720 129
@corvina/vue-grid-layout

A draggable and resizable grid layout, as a Vue component.

4,536 0
@widgetti/vue-grid-layout

A draggable and resizable grid layout, as a Vue component.

2,224 0
vue3-grid-layout-ts

A draggable and resizable grid layout, as a Vue component.

2,063

Version History

Version Released License
3.1.2
3.1.1
3.1.0
3.0.3
3.0.2
Pre-releases (6)
Version Released License
4.0.0-rc.1
3.1.2-rc.1
3.1.1-rc.4
3.1.1-rc.3
3.1.1-rc.2