@thangdevalone/meeting-grid-layout-vue

@thangdevalone/meeting-grid-layout-vue

Vue 3 bindings for meeting-grid-layout with motion-v animations.

For full documentation, layout modes, and API reference, see the main README.

Installation

npm install @thangdevalone/meeting-grid-layout-vue

Quick Start

<script setup>
import { GridContainer, GridItem } from '@thangdevalone/meeting-grid-layout-vue'
import { ref } from 'vue'

const participants = ref([
  { id: 1, name: 'You' },
  { id: 2, name: 'User 1' },
])
</script>

<template>
  <GridContainer aspect-ratio="16:9" :gap="8" :count="participants.length" layout-mode="gallery">
    <GridItem v-for="(participant, index) in participants" :key="participant.id" :index="index">
      <VideoTile :participant="participant" />
    </GridItem>
  </GridContainer>
</template>

Components

<GridContainer>

Wraps the grid and provides layout via provide/inject.

<GridItem>

Single grid cell with motion-v animation.

Scoped slot props: { contentDimensions, isLastVisibleOther, hiddenCount, isFloat }

<GridItem v-for="(p, index) in participants" :key="p.id" :index="index">
  <template #default="{ isLastVisibleOther, hiddenCount }">
    <div v-if="isLastVisibleOther && hiddenCount > 0" class="more-indicator">
      +{{ hiddenCount }} more
    </div>
    <VideoTile v-else :participant="p" />
  </template>
</GridItem>

<FloatingGridItem>

Draggable Picture-in-Picture overlay with corner snapping.

Events:

<GridOverlay>

Full-grid overlay for screen sharing, whiteboard, etc.

Responsive PiP

PiP auto-adjusts size based on container width via pre-defined sizes:

<script setup>
import { FloatingGridItem, GridContainer, GridItem } from '@thangdevalone/meeting-grid-layout-vue'
</script>

<template>
  <!-- Standalone — auto-responsive -->
  <FloatingGridItem size="large">
    <VideoTile />
  </FloatingGridItem>

  <!-- Auto-float in 2-person mode -->
  <GridContainer :count="2" float-size="large">
    <GridItem v-for="(p, i) in participants" :key="p.id" :index="i">
      <VideoTile :participant="p" />
    </GridItem>
  </GridContainer>
</template>

See the main README for full documentation on floatSize.

Composables

Re-exported from Core

License

MIT