vue-grid-layout is a grid layout system, like Gridster, for Vue.js. Heavily inspired in React-Grid-Layout
For Vue 1 use version 1.0.0
Know of others? Create a PR to let me know!
- Draggable widgets
- Resizable 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
Install the vue-grid-layout package package using npm:
npm install vue-grid-layout npm install vue-grid-layout or include the script in your html (download from releases):
<script src="vue-grid-layout.min.js"></script>var testLayout = [ {"x":0,"y":0,"w":2,"h":2,"i":"0"}, {"x":2,"y":0,"w":2,"h":4,"i":"1"}, {"x":4,"y":0,"w":2,"h":5,"i":"2"}, {"x":6,"y":0,"w":2,"h":3,"i":"3"}, {"x":8,"y":0,"w":2,"h":3,"i":"4"}, {"x":10,"y":0,"w":2,"h":3,"i":"5"}, {"x":0,"y":5,"w":2,"h":5,"i":"6"}, {"x":2,"y":5,"w":2,"h":5,"i":"7"}, {"x":4,"y":5,"w":2,"h":5,"i":"8"}, {"x":6,"y":4,"w":2,"h":4,"i":"9"}, {"x":8,"y":4,"w":2,"h":4,"i":"10"}, {"x":10,"y":4,"w":2,"h":4,"i":"11"}, {"x":0,"y":10,"w":2,"h":5,"i":"12"}, {"x":2,"y":10,"w":2,"h":5,"i":"13"}, {"x":4,"y":8,"w":2,"h":4,"i":"14"}, {"x":6,"y":8,"w":2,"h":4,"i":"15"}, {"x":8,"y":10,"w":2,"h":5,"i":"16"}, {"x":10,"y":4,"w":2,"h":2,"i":"17"}, {"x":0,"y":9,"w":2,"h":3,"i":"18"}, {"x":2,"y":6,"w":2,"h":2,"i":"19"} ]; var GridLayout = VueGridLayout.GridLayout; var GridItem = VueGridLayout.GridItem; new Vue({ el: '#app', components: { GridLayout, GridItem, }, data: { layout: testLayout, }, }); <grid-layout :layout="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :vertical-compact="true" :margin="[10, 10]" :use-css-transforms="true" > <grid-item v-for="item in layout" :x="item.x" :y="item.y" :w="item.w" :h="item.h" :i="item.i"> {{item.i}} </grid-item> </grid-layout>If you have a feature request, please add it as an issue or make a pull request.
- Basic grid layout
- Responsive
- Draggable grid items
- Resizable grid items
- Static elements
- Min/max w/h per item