# @aimee00/vue-grid-layout-3

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

Latest version **1.0.0** (published 2024-04-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install @aimee00/vue-grid-layout-3
pnpm add @aimee00/vue-grid-layout-3
yarn add @aimee00/vue-grid-layout-3
bun add @aimee00/vue-grid-layout-3
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0 |
| Published | 2024-04-23 |
| First published | 2024-04-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 11 |
| Unpacked size | 339.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | aimee00 |
| Keywords | grid, vuejs, drag, draggable, resize, resizable, fluid, responsive |

## Links

- npm: https://www.npmjs.com/package/@aimee00/vue-grid-layout-3
- Repository: https://github.com/yeroumei/vue-grid-layout-3
- Issues: https://github.com/yeroumei/vue-grid-layout-3/issues
- npm.io page: https://npm.io/package/@aimee00/vue-grid-layout-3

## Dependencies (11)

- [mitt](https://npm.io/package/mitt.md) ^3.0.0
- [interactjs](https://npm.io/package/interactjs.md) ^1.10.27
- [@interactjs/core](https://npm.io/package/@interactjs/core.md) ^1.10.27
- [@interactjs/utils](https://npm.io/package/@interactjs/utils.md) ^1.10.27
- [@interactjs/actions](https://npm.io/package/@interactjs/actions.md) ^1.10.27
- [@interactjs/interact](https://npm.io/package/@interactjs/interact.md) ^1.10.27
- [@interactjs/dev-tools](https://npm.io/package/@interactjs/dev-tools.md) ^1.10.27
- [@interactjs/modifiers](https://npm.io/package/@interactjs/modifiers.md) ^1.10.27
- [@interactjs/auto-start](https://npm.io/package/@interactjs/auto-start.md) ^1.10.27
- [@interactjs/auto-scroll](https://npm.io/package/@interactjs/auto-scroll.md) ^1.10.27
- [element-resize-detector](https://npm.io/package/element-resize-detector.md) ^1.2.4

## 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.0 (latest) — 2024-04-23

## README

# Support By

This project js support by [vue-grid-layout](https://github.com/xhlife/vue3-grid-layout)

# Vue 3 + TypeScript + Vite

 The template uses Vue 3 `<script setup>` SFCs, so pay attention to the version of vue.

## Supports Vue 3.2+

# Usage

```shell
npm i vue3-grid-layout-next
```

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

## add Scoped slot
```html
<grid-item v-slot="{style}">
  <div>
    <!-- get attribute, such as width,height, and so no  -->
    {{ style }}
  </div>
</grid-item>
```

## add dragging、 dragend event

```html
<grid-item
  @dragging="doSomething"
  @dragend="doSomethingEnd"
  >
</grid-item>

<script lang="ts" setup> 

  function doSomethin(event: MouseEvent, i: number | string) {
    
  }
</script>
```

## beware

### Usage with v-model

```html
 <GridLayout v-model:layout="layout">
  ...
 </GridLayout>
```

### Use ref object

If the responsive property is true, make sure layout is a ref object

```html
<script lang="ts" setup> 

  const responsive = ref(true)
  const layout = ref([])
  // const layout = reactive([]) // will cause some bug

  // it will work, when responsive is false
  // const layout = reactive([])

</script>

<template>
  <div class="layout">
    <GridLayout v-model:layout="layout" :responsive="responsive" >
      ...
    </GridLayout>
  </div>
</template>
```

# example 

[demo for echart](https://cxid.gitee.io/works/work/vue3-grid-layout/index.html) - [source：https://gitee.com/cxid/vue3-grid-layout-demo](https://gitee.com/cxid/vue3-grid-layout-demo)

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