Resize Observer — ichigo.js Examples

Example 1 · Resizable Box

Use Case: Track element dimensions in real-time using the ResizeObserver API.

Hint: Drag the bottom-right corner to resize the box!

{{ width }}px × {{ height }}px

⇲ Drag to resize

Content Width {{ contentWidth }}px

Content Height {{ contentHeight }}px

Border Box Width {{ borderBoxWidth }}px

Border Box Height {{ borderBoxHeight }}px

Resize Count {{ resizeCount }}

// Resize observer with the v-resize directive
<div v-resize="onResize" class="resizable-box">...</div>

methods: {
  onResize(entries, $ctx) {
    const entry = entries[0];

    // contentRect provides content dimensions
    this.width = Math.round(entry.contentRect.width);
    this.height = Math.round(entry.contentRect.height);

    // borderBoxSize provides full element dimensions
    if (entry.borderBoxSize) {
      const borderBox = entry.borderBoxSize[0];
      this.borderBoxWidth = Math.round(borderBox.inlineSize);
      this.borderBoxHeight = Math.round(borderBox.blockSize);
    }

    // Access element / vnode / userData through $ctx
    console.log('Element:', $ctx.element);
  }
}

Example 2 · Custom Box Model

Use Case: Configure ResizeObserver with custom options using the :options.resize attribute.

Hint: This example observes border-box dimensions instead of content-box!

{{ borderWidth }}px × {{ borderHeight }}px

⇲ Border-box measurement

Box Model {{ resizeOptions.box }}

Border Box Width {{ borderWidth }}px

Border Box Height {{ borderHeight }}px

// Custom box model with :options.resize
<div
  v-resize="onBorderBoxResize"
  :options.resize="resizeOptions">...</div>

data() {
  return { resizeOptions: { box: 'border-box' } };
},
methods: {
  onBorderBoxResize(entries, $ctx) {
    const entry = entries[0];
    if (entry.borderBoxSize) {
      const borderBox = entry.borderBoxSize[0];
      this.borderWidth = Math.round(borderBox.inlineSize);
      this.borderHeight = Math.round(borderBox.blockSize);
    }
  }
}

Key Features

ResizeObserver API: native browser API for efficient resize detection
Custom Options: configure the box model via :options.resize or :options
Context Parameter: access element, VNode, and userData via $ctx
Automatic Cleanup: the observer is disconnected during the destroy phase
Multiple Entries: supports observing multiple elements simultaneously

// Handler signature
onResize(entries, $ctx) {
  // entries[0].contentRect    - content dimensions
  // entries[0].borderBoxSize  - border box dimensions
  // entries[0].contentBoxSize - content box dimensions
  // $ctx.element / $ctx.vnode / $ctx.userData
}

// Options format (ResizeObserverOptions)
{
  box: 'content-box'  // 'content-box' | 'border-box' | 'device-pixel-content-box'
}