or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

tessl/npm-vue-resize

Vue.js plugin that detects DOM element resizing using a ResizeObserver component

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/vue-resize@1.0.x

To install, run

npx @tessl/cli install tessl/npm-vue-resize@1.0.0

Vue Resize

Vue Resize is a Vue.js plugin that detects DOM element resizing through a ResizeObserver component. It provides a cross-browser solution for monitoring parent element size changes, using object element-based detection with special handling for Internet Explorer compatibility.

Package Information

Package Name: vue-resize
Package Type: npm
Language: JavaScript (Vue.js)
Installation: npm install vue-resize

Core Imports

import VueResize from 'vue-resize';

For individual component import:

import { ResizeObserver } from 'vue-resize';

CSS import (required):

import 'vue-resize/dist/vue-resize.css';

Basic Usage

import Vue from 'vue';
import VueResize from 'vue-resize';
import 'vue-resize/dist/vue-resize.css';

// Install as plugin (registers components globally)
Vue.use(VueResize);

// Use in template - component monitors parent element
export default {
  template: `
    <div class="container" style="position: relative;">
      <h1>Resizable Content</h1>
      <resize-observer @notify="handleResize" />
    </div>
  `,
  methods: {
    handleResize({ width, height }) {
      console.log('Parent container resized:', width, height);
    }
  }
};

Architecture

Vue Resize uses object element-based resize detection to provide broad browser compatibility:

Plugin System: Standard Vue.js plugin with global component registration
Component-Based: Single ResizeObserver component that monitors its parent element's dimensions
Cross-Browser: Object element technique works across all browsers, with Internet Explorer-specific insertion order handling
Event-Driven: Emits resize notifications with parent element's width/height data
Positioning: Requires positioned parent container (relative, absolute, fixed - not 'static')
Auto-Installation: Automatically installs when Vue is globally available in browser environments

Capabilities

Plugin Installation

Global registration of resize detection components.

/**
 * Vue plugin installation function
 * @param Vue - Vue constructor
 */
function install(Vue: any): void;

/**
 * Default plugin export with install method and version
 */
interface VueResizePlugin {
  install: (Vue: any) => void;
  version: string;
}

ResizeObserver Component

Vue component that detects parent element resizing and emits notifications. The component itself is invisible and positioned absolutely within its parent to monitor dimension changes.

/**
 * ResizeObserver Vue component
 * Monitors parent element size changes and emits 'notify' events
 */
interface ResizeObserverComponent {
  name: 'ResizeObserver';
  props: {
    /** Whether to emit size notification immediately on mount */
    emitOnMount: {
      type: Boolean;
      default: false;
    };
    /** Whether to ignore width changes when detecting resize */
    ignoreWidth: {
      type: Boolean;
      default: false;
    };
    /** Whether to ignore height changes when detecting resize */
    ignoreHeight: {
      type: Boolean;
      default: false;
    };
  };
  /** Emitted when parent element is resized */
  $emit(event: 'notify', payload: ResizeNotification): void;
  
  // Lifecycle methods
  mounted(): void;
  beforeDestroy(): void;
  
  // Internal methods
  methods: {
    /** Compare current size with previous and emit if changed */
    compareAndNotify(): void;
    /** Emit current parent element size */
    emitSize(): void;
    /** Add resize event listeners to the object element */
    addResizeHandlers(): void;
    /** Remove resize event listeners and clean up */
    removeResizeHandlers(): void;
  };
}

/**
 * Resize notification payload containing parent element dimensions
 */
interface ResizeNotification {
  width: number;
  height: number;
}

Usage Examples:

// Basic resize detection
<template>
  <div class="resizable-container">
    <resize-observer @notify="onResize" />
    <p>This container is being monitored for size changes.</p>
  </div>
</template>

<script>
export default {
  methods: {
    onResize({ width, height }) {
      console.log(`Container size: ${width}x${height}`);
    }
  }
};
</script>

<style scoped>
.resizable-container {
  position: relative; /* Required: parent must be positioned */
  width: 100%;
  height: 200px;
  border: 1px solid #ccc;
}
</style>

// Advanced configuration
<template>
  <div class="monitored-element">
    <resize-observer 
      :emit-on-mount="true"
      :ignore-height="false"
      :ignore-width="false"
      @notify="handleElementResize" 
    />
    <div class="content">Dynamic content here...</div>
  </div>
</template>

<script>
export default {
  methods: {
    handleElementResize(dimensions) {
      // Handle both width and height changes
      this.updateLayout(dimensions);
    },
    updateLayout({ width, height }) {
      // Responsive layout adjustments
      if (width < 600) {
        this.isMobile = true;
      }
    }
  }
};
</script>

Individual Component Import

Import and register ResizeObserver component individually.

/**
 * ResizeObserver component for individual import
 */
const ResizeObserver: ResizeObserverComponent;

Component Styling

The ResizeObserver component includes internal CSS for invisible operation.

/**
 * Component CSS classes and styling
 */
.resize-observer {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  border: none;
  background-color: transparent;
  pointer-events: none;
  display: block;
  overflow: hidden;
  opacity: 0;
}

.resize-observer >>> object {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

Usage Example:

import Vue from 'vue';
import { ResizeObserver } from 'vue-resize';
import 'vue-resize/dist/vue-resize.css';

// Register individual component
Vue.component('resize-observer', ResizeObserver);
// Or with PascalCase name
Vue.component('ResizeObserver', ResizeObserver);

Installation Methods

Plugin Installation (Recommended)

import Vue from 'vue';
import VueResize from 'vue-resize';
import 'vue-resize/dist/vue-resize.css';

Vue.use(VueResize);
// Registers both 'resize-observer' and 'ResizeObserver' components globally

Note: The plugin auto-installs when Vue is globally available (in browser environments). Manual installation is only needed in module environments.

Component Import

import Vue from 'vue';
import { ResizeObserver } from 'vue-resize';
import 'vue-resize/dist/vue-resize.css';

Vue.component('resize-observer', ResizeObserver);

Browser Script Tag

<link rel="stylesheet" href="vue-resize/dist/vue-resize.css"/>
<script src="vue.js"></script>
<script src="vue-resize/dist/vue-resize.min.js"></script>

<script>
// Auto-installs when Vue is globally available
// Or install manually: Vue.use(VueResize);
// Access component: VueResize.ResizeObserver
</script>

Browser Compatibility

Modern browsers: Uses object element with about:blank data for resize detection
Internet Explorer: Special insertion order handling - object element is appended before setting data in IE, after setting data in other browsers
Detection Method: Creates an invisible object element that fills the parent, using its contentDocument window resize events
CSS Requirements: Parent element must have position other than 'static' (relative, absolute, or fixed)

Types

/**
 * Main plugin export
 */
interface VueResizePlugin {
  install: (Vue: any) => void;
  version: string;
}

/**
 * Resize event notification data
 */
interface ResizeNotification {
  width: number;
  height: number;
}

/**
 * ResizeObserver component props
 */
interface ResizeObserverProps {
  emitOnMount: boolean;
  ignoreWidth: boolean;
  ignoreHeight: boolean;
}