# vue-grid-layout-enhance

> vue-grid-layout enhance

Latest version **1.0.1** (published 2022-11-18) · 0 weekly downloads

## Install

```sh
npm install vue-grid-layout-enhance
pnpm add vue-grid-layout-enhance
yarn add vue-grid-layout-enhance
bun add vue-grid-layout-enhance
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-11-18 |
| First published | 2022-11-18 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 7 |
| Unpacked size | 3.9 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3 |
| Author | Allen |
| Maintainers | yyzkun |
| Keywords | grid, vuejs, drag, draggable, resize, resizable, fluid, responsive |

## Links

- npm: https://www.npmjs.com/package/vue-grid-layout-enhance
- Repository: https://github.com/yzkun001/vue-grid-layout-enhance
- Issues: https://github.com/yzkun001/vue-grid-layout-enhance/issues
- npm.io page: https://npm.io/package/vue-grid-layout-enhance

## Dependencies (7)

- [@interactjs/actions](https://npm.io/package/@interactjs/actions.md) 1.10.2
- [@interactjs/dev-tools](https://npm.io/package/@interactjs/dev-tools.md) 1.10.2
- [@interactjs/modifiers](https://npm.io/package/@interactjs/modifiers.md) 1.10.2
- [@interactjs/auto-start](https://npm.io/package/@interactjs/auto-start.md) 1.10.2
- [@interactjs/interactjs](https://npm.io/package/@interactjs/interactjs.md) 1.10.2
- [@interactjs/auto-scroll](https://npm.io/package/@interactjs/auto-scroll.md) 1.10.2
- [element-resize-detector](https://npm.io/package/element-resize-detector.md) ^1.2.1

## Alternatives

- [@lexical/table](https://npm.io/package/@lexical/table.md) — 3.0M weekly downloads
- [mantine-datatable](https://npm.io/package/mantine-datatable.md) — 98.2K weekly downloads
- [react-native-collapsible-tab-view](https://npm.io/package/react-native-collapsible-tab-view.md) — 70.6K weekly downloads
- [@handsontable/vue3](https://npm.io/package/@handsontable/vue3.md) — 16.1K weekly downloads
- [vuewordcloud](https://npm.io/package/vuewordcloud.md) — 7.2K weekly downloads

## Recent versions

- 1.0.1 (latest) — 2022-11-18
- 1.0.0 — 2022-11-18

## README

<h1 align="center">vue-grid-layout-enhance</h1>

<p align="center">
<a href="https://www.npmjs.com/package/vue-grid-layout-enhance"><img src="https://img.shields.io/npm/v/vue-grid-layout-enhance.svg"/> <img src="https://img.shields.io/npm/dm/vue-grid-layout-enhance.svg"/></a> <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-2.2.x-brightgreen.svg"/></a>
</p>


- The usage is fully compatible<a href="https://github.com/jbaysolutions/vue-grid-layout">vue-grid-layout</a>
- Based on vue-grid-layout, this plugin improves the way of using it by directly writing dom
- Optimized the non-essential parameters of grid-item

***use difference***

```html
<!-- 直接写dom使用 -->
<grid-item i="1">1</grid-item>
<grid-item i="2">2</grid-item>
<grid-item i="3">3</grid-item>
...



<!-- 参数优化 -->
<!-- vue-grid-layout -->
<grid-item x="x" y="y" w="w" h="h" i="i">{...content}</grid-item>

<!-- vue-grid-layout-plus -->
<grid-item i="i">{...content}</grid-item>
```

<h1 align="center">vue-grid-layout</h1>

<p align="center">
<!--a href="https://vuejs.org/">
    <img src="https://img.shields.io/badge/vue-2.2.x-brightgreen.svg"/>
</a-->
</p>
<h2 align="center">
<a href="https://jbaysolutions.github.io/vue-grid-layout/" target="_blank">Documentation Website</a>
</h2>

## What is Vue Grid Layout?

vue-grid-layout is a grid layout system, like [Gridster](http://dsmorse.github.io/gridster.js/), for Vue.js. **Heavily inspired by [React-Grid-Layout](https://github.com/STRML/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:** 2.4.0 (Supports Vue 2.2+)

#### **For legacy browsers**, like IE11, use version [2.3.12-legacy](https://github.com/jbaysolutions/vue-grid-layout/tree/legacy)
#### **For Vue 2.1.10 and below use version [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)**
#### **For Vue 1 use version [1.0.3](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.3)** 

## Documentation

Check out the <a href="https://jbaysolutions.github.io/vue-grid-layout/" target="_blank">Documentation Website</a>

<!--
Chinese documentation: [简体中文](./README-zh_CN.md) 
-->

#### Projects using vue-grid-layout

- [Transcrev](https://www.transcrev.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)
- [Draxed](https://www.draxed.com/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)
- [cryptotiles](https://www.cryptotiles.io/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)
- [Data Providers](https://www.dataproviders.io/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout)
- [Cataholic](https://cataholic.glitch.me/)

*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.


Developed by <a href="https://www.jbaysolutions.com">JBay Solutions</a>

---
_Source: https://npm.io/package/vue-grid-layout-enhance · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._