Support By

This project js support by vue-grid-layout, but vue-grid-layout do not support vue3.

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

npm i vue3-grid-layout-next

Documentation Website

add Scoped slot

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

add dragging、 dragend event

<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

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

Use ref object

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

<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 - source：https://gitee.com/cxid/vue3-grid-layout-demo