Package Exports

vue3-grid-layout-next
vue3-grid-layout-next/dist/vue3-grid-layout.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue3-grid-layout-next) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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