Grid Layout Plus

https://grid-layout-plus.netlify.app/guide/
Admin
Grid Layout Plus is a draggable and resizable grid layout system for Vue 3, heavily inspired by...
Tokens:8,577
Snippets:34
Trust Score:7.6
Update:1 year ago
Show doc for...
Tokens:
Raw
### Install Grid Layout Plus with pnpm

Source: https://grid-layout-plus.netlify.app/guide/installation

Install the grid-layout-plus package using the pnpm package manager. This is the recommended method for installation.

```shell
pnpm i grid-layout-plus
```

--------------------------------

### Import Grid Layout Plus Components in a Vue Component (Setup)

Source: https://grid-layout-plus.netlify.app/guide/installation

Import and use GridLayout and GridItem components within a Vue component using the `<script setup>` syntax. This is a modern and concise way to define components in Vue 3.

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

--------------------------------

### Install Grid Layout Plus with yarn

Source: https://grid-layout-plus.netlify.app/guide/installation

Install the grid-layout-plus package using the yarn package manager. This provides an alternative to pnpm for managing project dependencies.

```shell
yarn add grid-layout-plus
```

--------------------------------

### Include Grid Layout Plus Bundle in Browser

Source: https://grid-layout-plus.netlify.app/guide/installation

Include the browser-ready bundle of Grid Layout Plus directly in your HTML page by linking the JavaScript file. This method is useful for simpler projects or when not using a module bundler.

```html
<script src="dist/grid-layout-plus.js"></script>
```

--------------------------------

### Globally Import Grid Layout Plus Components

Source: https://grid-layout-plus.netlify.app/guide/installation

Globally import the GridLayout and GridItem components into your Vue application. This makes them available throughout your project without needing to import them in each component.

```typescript
import { GridLayout, GridItem } from 'grid-layout-plus'

app
  .component('GridLayout', GridLayout)
  .component('GridItem', GridItem)
```

--------------------------------

### Install Grid Layout Plus via Package Managers

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

Install the grid-layout-plus package using pnpm, yarn, or npm. pnpm is recommended for optimal dependency management.

```shell
# Using pnpm (recommended)
pnpm i grid-layout-plus

# Using yarn
yarn add grid-layout-plus

# Using npm
npm install grid-layout-plus
```

--------------------------------

### Import Grid Layout Plus Components in a Vue Component (Options API)

Source: https://grid-layout-plus.netlify.app/guide/installation

Import and register GridLayout and GridItem components within a Vue component using the Options API. This method is suitable for projects utilizing the traditional Vue component structure.

```vue
<script lang="ts">
import { defineComponent } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'

export default defineComponent({
  components: {
    GridLayout,
    GridItem
  }
})
</script>
```

--------------------------------

### Style Placeholder Element with CSS

Source: https://grid-layout-plus.netlify.app/guide/custom-style

Applies default CSS styles to the placeholder element within Grid Layout Plus. This includes setting z-index, user-select, background color, opacity, and transition duration.

```css
.vgl-item--placeholder {
  z-index: var(--vgl-placeholder-z-index, 2);
  user-select: none;
  background-color: var(--vgl-placeholder-bg, red);
  opacity: var(--vgl-placeholder-opacity, 20%);
  transition-duration: 100ms;
}
```

--------------------------------

### Customize Grid Layout Plus Variables

Source: https://grid-layout-plus.netlify.app/guide/custom-style

Define custom CSS variables to control the appearance of Grid Layout Plus components like placeholders and resizers. These variables allow for easy theming and styling.

```css
.vgl-layout {
  --vgl-placeholder-bg: red;
  --vgl-placeholder-opacity: 20%;
  --vgl-placeholder-z-index: 2;

  --vgl-item-resizing-z-index: 3;
  --vgl-item-resizing-opacity: 60%;
  --vgl-item-dragging-z-index: 3;
  --vgl-item-dragging-opacity: 100%;

  --vgl-resizer-size: 10px;
  --vgl-resizer-border-color: #444;
  --vgl-resizer-border-width: 2px;
}
```

--------------------------------

### Override Placeholder Background Color

Source: https://grid-layout-plus.netlify.app/guide/custom-style

Demonstrates how to override the default placeholder background color in Grid Layout Plus by setting the `--vgl-placeholder-bg` CSS variable within the `.vgl-layout` class.

```css
.vgl-layout {
  --vgl-placeholder-bg: green;
}
```

--------------------------------

### Advanced Grid Layout with Event Handling

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

Implement an advanced grid layout with GridItem components rendered via the default slot. This example demonstrates handling resize and move events, including 'resize', 'move', 'resized', and 'moved', as well as layout updates. Static items can also be defined.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'
import type { Layout } from 'grid-layout-plus'

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0', static: false },
  { x: 2, y: 0, w: 2, h: 4, i: '1', static: false },
  { x: 4, y: 0, w: 2, h: 3, i: '2', static: true }
])

const handleResize = (i: string | number, newH: number, newW: number, newHPx: number, newWPx: number) => {
  console.log(`Item ${i} resized: ${newW}x${newH} (${newWPx}px x ${newHPx}px)`)
}

const handleMove = (i: string | number, newX: number, newY: number) => {
  console.log(`Item ${i} moving to: (${newX}, ${newY})`)
}

const handleResized = (i: string | number, newH: number, newW: number, newHPx: number, newWPx: number) => {
  console.log(`Item ${i} resize complete: ${newW}x${newH}`)
}

const handleMoved = (i: string | number, newX: number, newY: number) => {
  console.log(`Item ${i} moved to: (${newX}, ${newY})`)
}

const layoutUpdated = (newLayout: Layout) => {
  console.log('Layout updated:', newLayout)
}
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    :margin="[10, 10]"
    is-draggable
    is-resizable
    vertical-compact
    use-css-transforms
    @layout-updated="layoutUpdated"
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :static="item.static"
      @resize="handleResize"
      @move="handleMove"
      @resized="handleResized"
      @moved="handleMoved"
    >
      <div class="item-content">
        {{ item.static ? 'Static' : 'Dynamic' }} - {{ item.i }}
      </div>
    </GridItem>
  </GridLayout>
</template>
```

--------------------------------

### Custom Grid Styling with CSS Variables (Vue)

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

Demonstrates how to customize the appearance of a grid layout using CSS variables and classes. It includes examples for placeholder styling, item states, resizer handles, and grid lines. This approach allows for dynamic theming and customization without altering the core component logic.

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

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 2, i: '1' },
  { x: 4, y: 0, w: 2, h: 2, i: '2' }
])
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    :margin="[10, 10]"
    is-draggable
    is-resizable
    class="custom-grid"
  >
    <template #item="{ item }">
      <div class="custom-item">{{ item.i }}</div>
    </template>
  </GridLayout>
</template>

<style>
.custom-grid {
  /* Placeholder styling */
  --vgl-placeholder-bg: #4CAF50;
  --vgl-placeholder-opacity: 30%;
  --vgl-placeholder-z-index: 2;

  /* Item states */
  --vgl-item-resizing-z-index: 3;
  --vgl-item-resizing-opacity: 80%;
  --vgl-item-dragging-z-index: 3;
  --vgl-item-dragging-opacity: 90%;

  /* Resizer handle */
  --vgl-resizer-size: 12px;
  --vgl-resizer-border-color: #2196F3;
  --vgl-resizer-border-width: 3px;
}

/* Grid lines background */
.custom-grid::before {
  position: absolute;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  margin: 5px;
  content: '';
  background-image:
    linear-gradient(to right, #e0e0e0 1px, transparent 1px),
    linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
  background-repeat: repeat;
  background-size: calc(calc(100% - 5px) / 12) 40px;
  z-index: 0;
}

.custom-item {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
</style>
```

--------------------------------

### Basic Draggable and Resizable Grid Layout Setup

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

Set up a basic Vue 3 grid layout using GridLayout and GridItem components. Configure properties like column number, row height, margins, and enable dragging and resizing. Items are rendered using the '#item' slot.

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

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 4, i: '1' },
  { x: 4, y: 0, w: 2, h: 3, i: '2' },
  { x: 6, y: 0, w: 2, h: 2, i: '3' }
])
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    :margin="[10, 10]"
    is-draggable
    is-resizable
    vertical-compact
    use-css-transforms
  >
    <template #item="{ item }">
      <div class="grid-item-content">
        {{ item.i }}
      </div>
    </template>
  </GridLayout>
</template>
```

--------------------------------

### Component-Level Import of Grid Components

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

Import and use GridLayout and GridItem components within a specific Vue component's script setup. This is useful for modularity and managing dependencies.

```vue
<!-- Component-level import -->
<script setup lang="ts">
import { GridLayout, GridItem } from 'grid-layout-plus'
</script>

<template>
  <GridLayout>
    <GridItem />
  </GridLayout>
</template>
```

--------------------------------

### Define Layout Data in Vue

Source: https://grid-layout-plus.netlify.app/guide/usage

Defines the reactive layout data structure required by Grid Layout Plus. Each item must include 'i', 'x', 'y', 'w', and 'h' properties. This is typically done using Vue's reactive API.

```vue
<script setup lang="ts">
import { reactive } from 'vue'

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 4, i: '1' }
])
</script>
```

--------------------------------

### Add Grid Lines to Layout with CSS

Source: https://grid-layout-plus.netlify.app/guide/custom-style

Adds visual grid lines to the Grid Layout Plus using pseudo-elements and linear gradients. This CSS snippet defines the positioning, sizing, and appearance of the grid lines.

```css
.vgl-layout::before {
  position: absolute;
  width: calc(100% - 5px);
  height: calc(100% - 5px);
  margin: 5px;
  content: '';
  background-image:
    linear-gradient(to right,lightgrey 1px,transparent 1px),
    linear-gradient(to bottom, lightgrey 1px, transparent 1px);
  background-repeat: repeat;
  background-size: calc(calc(100% - 5px) / 12) 40px;
}
```

--------------------------------

### Use Default Slot for Grid Items in Vue

Source: https://grid-layout-plus.netlify.app/guide/usage

Shows how to use the default slot for more flexible control over GridItem components. This method allows direct interaction with GridItem, including listening to events like 'resize'. It requires manually passing item properties and setting up event handlers.

```vue
<template>
  <!-- Default slot usage -->
  <GridLayout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    is-draggable
    is-resizable
    vertical-compact
    use-css-transforms
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      @resize="handleResize"
    >
      {{ item.i }}
    </GridItem>
  </GridLayout>
</template>
```

--------------------------------

### Use Item Slot for Grid Items in Vue

Source: https://grid-layout-plus.netlify.app/guide/usage

Demonstrates using the '#item' slot to define grid items. Properties from the layout definition are automatically passed to the internal GridItem component, simplifying item creation. Requires basic GridLayout component configuration.

```vue
<template>
  <!-- Item slot usage -->
  <GridLayout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    is-draggable
    is-resizable
    vertical-compact
    use-css-transforms
  >
    <template #item="{ item }">
      {{ item.i }}
    </template>
  </GridLayout>
</template>
```

--------------------------------

### TypeScript: LayoutItem Interface

Source: https://grid-layout-plus.netlify.app/guide/properties

Extends LayoutItemRequired to include optional properties for advanced item configuration. Supports minimum/maximum dimensions, drag/resize states, and static positioning.

```typescript
interface LayoutItem extends LayoutItemRequired {
  minW?: number,
  minH?: number,
  maxW?: number,
  maxH?: number,
  moved?: boolean,
  static?: boolean,
  isDraggable?: boolean,
  isResizable?: boolean
}
```

--------------------------------

### Vue Template with Grid Layout and Item Events

Source: https://grid-layout-plus.netlify.app/guide/events

This Vue template demonstrates the integration of GridLayout and GridItem components, showcasing how to bind various event listeners for layout management and item interactions. It includes event handlers for layout mounting, readiness, updates, breakpoint changes, and item resizing/moving.

```vue
<template>
  <GridLayout
    v-model:layout="layout"
    :row-height="30"
    @layout-before-mount="layoutBeforeMount"
    @layout-mounted="layoutMounted"
    @layout-ready="layoutReady"
    @layout-updated="layoutUpdated"
    @breakpoint-changed="breakpointChanged"
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      @resize="resize"
      @move="move"
      @resized="resized"
      @container-resized="containerResized"
      @moved="moved"
    >
      {{ item.i }}
    </GridItem>
  </GridLayout>
</template>
```

--------------------------------

### TypeScript: ResponsiveLayout Type Definition

Source: https://grid-layout-plus.netlify.app/guide/properties

Defines ResponsiveLayout as a record mapping Breakpoint aliases to Layout arrays, enabling different grid arrangements for various screen sizes.

```typescript
type ResponsiveLayout = Record<Breakpoint, Layout>
```

--------------------------------

### Responsive Layout Configuration with Vue

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

Configures a responsive grid layout using Vue.js and the 'grid-layout-plus' library. It defines multiple layout configurations for different screen sizes (lg, md, sm) and specifies breakpoint thresholds and column counts. The component emits an event when the breakpoint changes.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'
import type { Breakpoint, Layout } from 'grid-layout-plus'

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 4, i: '1' }
])

const responsiveLayouts = {
  lg: [
    { x: 0, y: 0, w: 2, h: 2, i: '0' },
    { x: 2, y: 0, w: 2, h: 4, i: '1' }
  ],
  md: [
    { x: 0, y: 0, w: 2, h: 2, i: '0' },
    { x: 0, y: 2, w: 2, h: 4, i: '1' }
  ],
  sm: [
    { x: 0, y: 0, w: 3, h: 2, i: '0' },
    { x: 0, y: 2, w: 3, h: 4, i: '1' }
  ]
}

const breakpoints = { lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }
const cols = { lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }

const breakpointChanged = (newBreakpoint: Breakpoint, newLayout: Layout) => {
  console.log(`Breakpoint changed to ${newBreakpoint}:`, newLayout)
}
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :responsive-layouts="responsiveLayouts"
    :breakpoints="breakpoints"
    :cols="cols"
    :row-height="30"
    responsive
    is-draggable
    is-resizable
    @breakpoint-changed="breakpointChanged"
  >
    <template #item="{ item }">
      {{ item.i }}
    </template>
  </GridLayout>
</template>

```

--------------------------------

### TypeScript Interfaces for Grid Layouts (Vue)

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

Illustrates the use of TypeScript interfaces and type definitions for creating type-safe layout items, defining breakpoints, columns, and responsive layouts in Vue.js. It includes functions for creating layout items and handlers for move, resize, and breakpoint change events, ensuring type safety and better code maintainability.

```vue
<script setup lang="ts">
import { reactive } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'
import type {
  Layout,
  LayoutItem,
  LayoutItemRequired,
  Breakpoint,
  Breakpoints,
  ResponsiveLayout
} from 'grid-layout-plus'

// Type-safe layout item creation
const createLayoutItem = (
  i: string | number,
  x: number,
  y: number,
  w: number,
  h: number,
  options?: Partial<Omit<LayoutItem, keyof LayoutItemRequired>>
): LayoutItem => ({
  i,
  x,
  y,
  w,
  h,
  minW: options?.minW ?? 1,
  minH: options?.minH ?? 1,
  maxW: options?.maxW ?? Infinity,
  maxH: options?.maxH ?? Infinity,
  static: options?.static ?? false,
  isDraggable: options?.isDraggable,
  isResizable: options?.isResizable,
  moved: options?.moved ?? false
})

const layout: Layout = reactive([
  createLayoutItem('0', 0, 0, 2, 2, { minW: 2, minH: 2 }),
  createLayoutItem('1', 2, 0, 2, 2, { static: true }),
  createLayoutItem('2', 4, 0, 2, 2, { isDraggable: false })
])

const breakpoints: Breakpoints = {
  lg: 1200,
  md: 996,
  sm: 768,
  xs: 480,
  xxs: 0
}

const cols: Breakpoints = {
  lg: 12,
  md: 10,
  sm: 6,
  xs: 4,
  xxs: 2
}

const responsiveLayouts: ResponsiveLayout = {
  lg: [createLayoutItem('0', 0, 0, 2, 2), createLayoutItem('1', 2, 0, 2, 2)],
  md: [createLayoutItem('0', 0, 0, 2, 2), createLayoutItem('1', 0, 2, 2, 2)],
  sm: [createLayoutItem('0', 0, 0, 3, 2), createLayoutItem('1', 0, 2, 3, 2)],
  xs: [createLayoutItem('0', 0, 0, 4, 2), createLayoutItem('1', 0, 2, 4, 2)],
  xxs: [createLayoutItem('0', 0, 0, 2, 2), createLayoutItem('1', 0, 2, 2, 2)]
}

const handleMove = (i: number | string, newX: number, newY: number): void => {
  console.log(`Item ${i} moved to (${newX}, ${newY})`)
}

const handleResize = (
  i: number | string,
  newH: number,
  newW: number,
  newHPx: number,
  newWPx: number
): void => {
  console.log(`Item ${i} resized to ${newW}x${newH} (${newWPx}px x ${newHPx}px)`)
}

const handleBreakpointChanged = (newBreakpoint: Breakpoint, newLayout: Layout): void => {
  console.log(`Switched to ${newBreakpoint} breakpoint with ${newLayout.length} items`)
}
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :responsive-layouts="responsiveLayouts"
    :breakpoints="breakpoints"
    :cols="cols"
    :col-num="12"
    :row-height="30"
    responsive
    is-draggable
    is-resizable
    @breakpoint-changed="handleBreakpointChanged"
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :static="item.static"
      :is-draggable="item.isDraggable"
      :is-resizable="item.isResizable"
      @move="handleMove"
      @resize="handleResize"
    >
      {{ item.i }}
    </GridItem>
  </GridLayout>
</template>
```

--------------------------------

### GridLayout Component Event Signatures (TypeScript)

Source: https://grid-layout-plus.netlify.app/guide/events

TypeScript function signatures for events emitted by the GridLayout component. These events provide notifications for different stages of the layout lifecycle, including before mounting, after mounting, when the layout is ready, after updates, and when the breakpoint changes.

```ts
function layoutBeforeMount(newLayout: Layout): void
```

```ts
function layoutMounted(newLayout: Layout): void
```

```ts
function layoutReady(newLayout: Layout): void
```

```ts
function layoutUpdated(newLayout: Layout): void
```

```ts
function breakpointChanged(newBreakpoint: Breakpoint, newLayout: Layout): void
```

--------------------------------

### Vue: Lifecycle Events and State Management in GridLayout

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

This Vue snippet demonstrates how to handle various lifecycle events emitted by GridLayout Plus and manage the grid's state. It includes functions to log events like 'layout-before-mount', 'layout-mounted', 'layout-updated', 'breakpoint-changed', and 'container-resized'. State management is shown through adding/removing items and persisting/loading the layout to/from localStorage.

```vue
<script setup lang="ts">
import { reactive, ref } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'
import type { Layout, Breakpoint } from 'grid-layout-plus'

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 2, i: '1' }
])

const eventLog = ref<string[]>([])

const log = (message: string) => {
  eventLog.value.unshift(`${new Date().toLocaleTimeString()}: ${message}`)
  if (eventLog.value.length > 10) eventLog.value.pop()
}

const layoutBeforeMount = (newLayout: Layout) => {
  log('Layout before mount')
}

const layoutMounted = (newLayout: Layout) => {
  log('Layout mounted')
}

const layoutReady = (newLayout: Layout) => {
  log('Layout ready')
}

const layoutUpdated = (newLayout: Layout) => {
  log(`Layout updated: ${newLayout.length} items`)
}

const breakpointChanged = (newBreakpoint: Breakpoint, newLayout: Layout) => {
  log(`Breakpoint changed to: ${newBreakpoint}`)
}

const containerResized = (i: string | number, newH: number, newW: number) => {
  log(`Container resized for item ${i}: ${newW}x${newH}`)
}

const addItem = () => {
  const newId = String(layout.length)
  layout.push({
    x: (layout.length * 2) % 12,
    y: Math.floor(layout.length / 6) * 2,
    w: 2,
    h: 2,
    i: newId
  })
  log(`Added item ${newId}`)
}

const removeItem = () => {
  if (layout.length > 0) {
    const removed = layout.pop()
    log(`Removed item ${removed?.i}`)
  }
}

const saveLayout = () => {
  const serialized = JSON.stringify(layout)
  localStorage.setItem('grid-layout', serialized)
  log('Layout saved to localStorage')
}

const loadLayout = () => {
  const serialized = localStorage.getItem('grid-layout')
  if (serialized) {
    const loaded = JSON.parse(serialized)
    layout.splice(0, layout.length, ...loaded)
    log('Layout loaded from localStorage')
  }
}
</script>

<template>
  <div>
    <div class="controls">
      <button @click="addItem">Add Item</button>
      <button @click="removeItem">Remove Item</button>
      <button @click="saveLayout">Save Layout</button>
      <button @click="loadLayout">Load Layout</button>
    </div>

    <div class="event-log">
      <h3>Event Log:</h3>
      <div v-for="(event, index) in eventLog" :key="index" class="log-entry">
        {{ event }}
      </div>
    </div>

    <GridLayout
      v-model:layout="layout"
      :col-num="12"
      :row-height="30"
      is-draggable
      is-resizable
      @layout-before-mount="layoutBeforeMount"
      @layout-mounted="layoutMounted"
      @layout-ready="layoutReady"
      @layout-updated="layoutUpdated"
      @breakpoint-changed="breakpointChanged"
    >
      <GridItem
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        @container-resized="containerResized"
      >
        {{ item.i }}
      </GridItem>
    </GridLayout>
  </div>
</template>

<style scoped>
.controls {
  margin-bottom: 16px;
  display: flex;
  gap: 8px;
}

.event-log {
  margin-bottom: 16px;
  padding: 12px;
  background: #f5f5f5;
  border-radius: 4px;
  max-height: 200px;
  overflow-y: auto;
}

.log-entry {
  font-family: monospace;
  font-size: 12px;
  padding: 2px 0;
}
</style>
```

--------------------------------

### Global Vue App Registration of Grid Components

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

Globally register GridLayout and GridItem components with your Vue application instance. This makes them available throughout your project without explicit imports in each component.

```typescript
// Global registration
import { createApp } from 'vue'
import { GridLayout, GridItem } from 'grid-layout-plus'

const app = createApp(App)
app
  .component('GridLayout', GridLayout)
  .component('GridItem', GridItem)
app.mount('#app')
```

--------------------------------

### TypeScript: LayoutItemRequired Interface

Source: https://grid-layout-plus.netlify.app/guide/properties

Defines the minimum required properties for a layout item within the grid. Includes width (w), height (h), x and y coordinates, and a unique identifier (i).

```typescript
interface LayoutItemRequired {
  w: number,
  h: number,
  x: number,
  y: number,
  i: number | string
}
```

--------------------------------

### TypeScript: Breakpoint Type Definition

Source: https://grid-layout-plus.netlify.app/guide/properties

Defines a specific breakpoint alias as a string literal type, representing common screen size categories used for responsive layouts.

```typescript
type Breakpoint = 'xxs' | 'xs' | 'sm' | 'md' | 'lg'
```

--------------------------------

### TypeScript: Layout Type Definition

Source: https://grid-layout-plus.netlify.app/guide/properties

Defines a Layout as an array of LayoutItem objects, representing the arrangement of items within the grid at a specific breakpoint or state.

```typescript
type Layout = Array<LayoutItem>
```

--------------------------------

### GridItem Component Event Signatures (TypeScript)

Source: https://grid-layout-plus.netlify.app/guide/events

TypeScript function signatures for events emitted by the GridItem component. These events capture user interactions and internal state changes related to individual grid items, such as movement, resizing, and container dimension changes.

```ts
function move(i: number | string, newX: number, newY: number): void
```

```ts
function resize(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void
```

```ts
function moved(i: number | string, newX: number, newY: number): void
```

```ts
function resized(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void
```

```ts
function containerResized(i: number | string, newH: number, newW: number, newHPx: number, newWPx: number): void
```

--------------------------------

### TypeScript: Breakpoints Type Definition

Source: https://grid-layout-plus.netlify.app/guide/properties

Defines the Breakpoints type as a record mapping Breakpoint aliases to numbers, typically representing pixel values for screen width thresholds.

```typescript
type Breakpoints = Record<Breakpoint, number>
```

--------------------------------

### Grid Item Constraints with Vue

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

Demonstrates setting minimum and maximum dimensions for grid items, as well as controlling drag and resize behavior with Vue.js and 'grid-layout-plus'. The 'is-bounded' prop restricts dragging within the grid container. Collision prevention is also enabled.

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

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0', minW: 2, minH: 2, maxW: 4, maxH: 4 },
  { x: 2, y: 0, w: 2, h: 2, i: '1', minW: 1, minH: 1, maxW: 6, maxH: 6 },
  { x: 4, y: 0, w: 2, h: 2, i: '2', isDraggable: false, isResizable: true }
])
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    :max-rows="10"
    is-draggable
    is-resizable
    is-bounded
    prevent-collision
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      :min-w="item.minW"
      :min-h="item.minH"
      :max-w="item.maxW"
      :max-h="item.maxH"
      :is-draggable="item.isDraggable"
      :is-resizable="item.isResizable"
    >
      <div>Item {{ item.i }}</div>
      <div>Size: {{ item.w }}x{{ item.h }}</div>
    </GridItem>
  </GridLayout>
</template>

```

--------------------------------

### Custom Drag and Resize Handlers in Vue

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

Implements custom drag and resize handlers for grid items using Vue.js and 'grid-layout-plus'. Specific HTML elements can be designated as drag origins ('drag-allow-from') or elements that should be ignored during drag/resize operations ('drag-ignore-from', 'resize-ignore-from').

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

const layout = reactive([
  { x: 0, y: 0, w: 3, h: 3, i: '0' },
  { x: 3, y: 0, w: 3, h: 3, i: '1' }
])
</script>

<template>
  <GridLayout
    v-model:layout="layout"
    :col-num="12"
    :row-height="30"
    is-draggable
    is-resizable
  >
    <GridItem
      v-for="item in layout"
      :key="item.i"
      :x="item.x"
      :y="item.y"
      :w="item.w"
      :h="item.h"
      :i="item.i"
      drag-allow-from=".drag-handle"
      drag-ignore-from="a, button, input"
      resize-ignore-from="a, button"
    >
      <div class="item-header drag-handle">
        <span>Drag from here - {{ item.i }}</span>
        <button @click="() => console.log('Button clicked')">Action</button>
      </div>
      <div class="item-body">
        <p>Content area with <a href="#">links</a></p>
        <input type="text" placeholder="Input field" />
      </div>
    </GridItem>
  </GridLayout>
</template>

<style scoped>
.drag-handle {
  cursor: move;
  background: #f0f0f0;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}

.item-body {
  padding: 8px;
}
</style>

```

--------------------------------

### Vue: Aspect Ratio Preservation and Transform Scale in GridLayout

Source: https://context7.com/context7/grid-layout-plus_netlify_app_guide/llms.txt

This snippet shows how to use GridLayout Plus in Vue to preserve the aspect ratio of grid items and control their scaling. It includes buttons to zoom in and out, adjusting the 'transform-scale' property to dynamically resize the grid while maintaining item proportions. The 'preserve-aspect-ratio' attribute on GridItem ensures that items do not distort during scaling.

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

const layout = reactive([
  { x: 0, y: 0, w: 2, h: 2, i: '0' },
  { x: 2, y: 0, w: 2, h: 2, i: '1' },
  { x: 4, y: 0, w: 2, h: 2, i: '2' }
])

const scale = ref(1)

const zoomIn = () => {
  scale.value = Math.min(scale.value + 0.1, 2)
}

const zoomOut = () => {
  scale.value = Math.max(scale.value - 0.1, 0.5)
}
</script>

<template>
  <div>
    <div class="controls">
      <button @click="zoomOut">Zoom Out</button>
      <span>Scale: {{ scale.toFixed(1) }}</span>
      <button @click="zoomIn">Zoom In</button>
    </div>

    <GridLayout
      v-model:layout="layout"
      :col-num="12"
      :row-height="30"
      :transform-scale="scale"
      is-draggable
      is-resizable
    >
      <GridItem
        v-for="item in layout"
        :key="item.i"
        :x="item.x"
        :y="item.y"
        :w="item.w"
        :h="item.h"
        :i="item.i"
        preserve-aspect-ratio
      >
        <div class="square-content">{{ item.i }}</div>
      </GridItem>
    </GridLayout>
  </div>
</template>

<style scoped>
.controls {
  margin-bottom: 16px;
  display: flex;
  gap: 12px;
  align-items: center;
}

.square-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  font-size: 24px;
}
</style>
```
Tokens:
Raw