How to Use vue-grid-layout-3 in Nuxt 3

Installation

First, install the required dependencies:

pnpm add vue-grid-layout-3 element-resize-detector

Configuration

Create a Shim File

Create a file named element-resize-detector.js in the ~/shims/ directory:

import * as elementResizeDetectorMaker from 'element-resize-detector'
export default elementResizeDetectorMaker

Update Nuxt Configuration

Modify your nuxt.config.ts file to include the alias:

export default defineNuxtConfig({
  // ... existing code ...
  alias: {
    'element-resize-detector': '~/shims/element-resize-detector.js'
  }
})

This configuration intercepts the import of element-resize-detector and provides a compatible interface without modifying the source of vue-grid-layout-v3.

Usage in Components

Here's an example of how to use the grid layout in your components:

<script lang="ts" setup>
import { GridLayout, GridItem } from 'vue-grid-layout-v3'

const layout = ref([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 4, i: '1' },
  // ... existing code ...
  { x: 10, y: 4, w: 2, h: 4, i: '11' },
])
</script>

<template>
  <div>
    <h1>Grid Layout Example</h1>
    <grid-layout
      :layout="layout"
      :col-num="12"
      :row-height="30"
      :is-draggable="true"
      :is-resizable="true"
      :vertical-compact="true"
      :use-css-transforms="true"
    >
      <grid-item
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
      >
        {{ item.i }}
      </grid-item>
    </grid-layout>
  </div>
</template>

<style scoped>
.vue-grid-layout {
  background: #eee;
}
.vue-grid-item {
  background: #ccc;
  border: 1px solid #999;
}
</style>

This example creates a responsive grid layout with draggable and resizable items. Each grid item displays its identifier (item.i).

Key Components

GridLayout: The main container for the grid.
GridItem: Individual items within the grid.

Props

layout: An array of objects defining the position and size of each grid item.
col-num: The number of columns in the grid.
row-height: The height of each row in pixels.
is-draggable: Allows items to be dragged.
is-resizable: Allows items to be resized.
vertical-compact: Compacts items vertically when space is available.
use-css-transforms: Uses CSS transforms for positioning items.

Customize these props and add more as needed for your specific use case.

isramv/vue-grid-layout-3 with Nuxt 3.md