Vue Templates Logo Vue Templates
Vue Grid Layout screenshot

Vue Grid Layout

Author Avatar Theme by Jbaysolutions
Updated: 14 Jun 2023
7290 Stars

A draggable and resizable grid layout, for Vue.js.

Github Live Preview

Overview

Vue Grid Layout is a grid layout system designed for Vue.js, heavily inspired by React-Grid-Layout. It offers features such as draggable, resizable, and static widgets with bounds checking for dragging and resizing. The layout can be serialized and restored, supports automatic RTL, is responsive, and works with legacy browsers like IE11.

Features

  • Draggable widgets: Users can easily drag widgets around the grid.
  • Resizable widgets: Widgets can be resized for better customization.
  • Static widgets: Option to make widgets static within the layout.
  • Bounds checking: Ensures that dragging and resizing of widgets stays within specified bounds.
  • Serialization: Ability to serialize and restore the layout.
  • Automatic RTL support: Supports automatic Right-to-Left layout.
  • Responsive: Layout adjusts based on screen size.
  • Legacy browser support: Specifically supports IE11 and older browsers.

Installation

To install Vue Grid Layout, you can use npm or yarn:

npm install vue-grid-layout
# or
yarn add vue-grid-layout

Summary

Vue Grid Layout is a versatile grid system for Vue.js, offering a range of features like draggable and resizable widgets, serialization, responsive design, and RTL support. It provides a user-friendly way to create dynamic layouts and is compatible with both modern and legacy browsers. Developed by JBay Solutions, Vue Grid Layout is a valuable tool for developers seeking a flexible grid system for their Vue.js projects.