0
# Vue Resize
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: vue-resize
7
- **Package Type**: npm
8
- **Language**: JavaScript (Vue.js)
9
- **Installation**: `npm install vue-resize`
10

11
## Core Imports
12

13
```javascript
14
import VueResize from 'vue-resize';
15
```
16

17
For individual component import:
18

19
```javascript
20
import { ResizeObserver } from 'vue-resize';
21
```
22

23
CSS import (required):
24

25
```javascript
26
import 'vue-resize/dist/vue-resize.css';
27
```
28

29
## Basic Usage
30

31
```javascript
32
import Vue from 'vue';
33
import VueResize from 'vue-resize';
34
import 'vue-resize/dist/vue-resize.css';
35

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

39
// Use in template - component monitors parent element
40
export default {
41
  template: `
42
    <div class="container" style="position: relative;">
43
      <h1>Resizable Content</h1>
44
      <resize-observer @notify="handleResize" />
45
    </div>
46
  `,
47
  methods: {
48
    handleResize({ width, height }) {
49
      console.log('Parent container resized:', width, height);
50
    }
51
  }
52
};
53
```
54

55
## Architecture
56

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

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

66
## Capabilities
67

68
### Plugin Installation
69

70
Global registration of resize detection components.
71

72
```javascript { .api }
73
/**
74
 * Vue plugin installation function
75
 * @param Vue - Vue constructor
76
 */
77
function install(Vue: any): void;
78

79
/**
80
 * Default plugin export with install method and version
81
 */
82
interface VueResizePlugin {
83
  install: (Vue: any) => void;
84
  version: string;
85
}
86
```
87

88
### ResizeObserver Component
89

90
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.
91

92
```javascript { .api }
93
/**
94
 * ResizeObserver Vue component
95
 * Monitors parent element size changes and emits 'notify' events
96
 */
97
interface ResizeObserverComponent {
98
  name: 'ResizeObserver';
99
  props: {
100
    /** Whether to emit size notification immediately on mount */
101
    emitOnMount: {
102
      type: Boolean;
103
      default: false;
104
    };
105
    /** Whether to ignore width changes when detecting resize */
106
    ignoreWidth: {
107
      type: Boolean;
108
      default: false;
109
    };
110
    /** Whether to ignore height changes when detecting resize */
111
    ignoreHeight: {
112
      type: Boolean;
113
      default: false;
114
    };
115
  };
116
  /** Emitted when parent element is resized */
117
  $emit(event: 'notify', payload: ResizeNotification): void;
118
  
119
  // Lifecycle methods
120
  mounted(): void;
121
  beforeDestroy(): void;
122
  
123
  // Internal methods
124
  methods: {
125
    /** Compare current size with previous and emit if changed */
126
    compareAndNotify(): void;
127
    /** Emit current parent element size */
128
    emitSize(): void;
129
    /** Add resize event listeners to the object element */
130
    addResizeHandlers(): void;
131
    /** Remove resize event listeners and clean up */
132
    removeResizeHandlers(): void;
133
  };
134
}
135

136
/**
137
 * Resize notification payload containing parent element dimensions
138
 */
139
interface ResizeNotification {
140
  width: number;
141
  height: number;
142
}
143
```
144

145
**Usage Examples:**
146

147
```javascript
148
// Basic resize detection
149
<template>
150
  <div class="resizable-container">
151
    <resize-observer @notify="onResize" />
152
    <p>This container is being monitored for size changes.</p>
153
  </div>
154
</template>
155

156
<script>
157
export default {
158
  methods: {
159
    onResize({ width, height }) {
160
      console.log(`Container size: ${width}x${height}`);
161
    }
162
  }
163
};
164
</script>
165

166
<style scoped>
167
.resizable-container {
168
  position: relative; /* Required: parent must be positioned */
169
  width: 100%;
170
  height: 200px;
171
  border: 1px solid #ccc;
172
}
173
</style>
174
```
175

176
```javascript
177
// Advanced configuration
178
<template>
179
  <div class="monitored-element">
180
    <resize-observer 
181
      :emit-on-mount="true"
182
      :ignore-height="false"
183
      :ignore-width="false"
184
      @notify="handleElementResize" 
185
    />
186
    <div class="content">Dynamic content here...</div>
187
  </div>
188
</template>
189

190
<script>
191
export default {
192
  methods: {
193
    handleElementResize(dimensions) {
194
      // Handle both width and height changes
195
      this.updateLayout(dimensions);
196
    },
197
    updateLayout({ width, height }) {
198
      // Responsive layout adjustments
199
      if (width < 600) {
200
        this.isMobile = true;
201
      }
202
    }
203
  }
204
};
205
</script>
206
```
207

208
### Individual Component Import
209

210
Import and register ResizeObserver component individually.
211

212
```javascript { .api }
213
/**
214
 * ResizeObserver component for individual import
215
 */
216
const ResizeObserver: ResizeObserverComponent;
217
```
218

219
### Component Styling
220

221
The ResizeObserver component includes internal CSS for invisible operation.
222

223
```css { .api }
224
/**
225
 * Component CSS classes and styling
226
 */
227
.resize-observer {
228
  position: absolute;
229
  top: 0;
230
  left: 0;
231
  z-index: -1;
232
  width: 100%;
233
  height: 100%;
234
  border: none;
235
  background-color: transparent;
236
  pointer-events: none;
237
  display: block;
238
  overflow: hidden;
239
  opacity: 0;
240
}
241

242
.resize-observer >>> object {
243
  display: block;
244
  position: absolute;
245
  top: 0;
246
  left: 0;
247
  height: 100%;
248
  width: 100%;
249
  overflow: hidden;
250
  pointer-events: none;
251
  z-index: -1;
252
}
253
```
254

255
**Usage Example:**
256

257
```javascript
258
import Vue from 'vue';
259
import { ResizeObserver } from 'vue-resize';
260
import 'vue-resize/dist/vue-resize.css';
261

262
// Register individual component
263
Vue.component('resize-observer', ResizeObserver);
264
// Or with PascalCase name
265
Vue.component('ResizeObserver', ResizeObserver);
266
```
267

268
## Installation Methods
269

270
### Plugin Installation (Recommended)
271

272
```javascript
273
import Vue from 'vue';
274
import VueResize from 'vue-resize';
275
import 'vue-resize/dist/vue-resize.css';
276

277
Vue.use(VueResize);
278
// Registers both 'resize-observer' and 'ResizeObserver' components globally
279
```
280

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

283
### Component Import
284

285
```javascript
286
import Vue from 'vue';
287
import { ResizeObserver } from 'vue-resize';
288
import 'vue-resize/dist/vue-resize.css';
289

290
Vue.component('resize-observer', ResizeObserver);
291
```
292

293
### Browser Script Tag
294

295
```html
296
<link rel="stylesheet" href="vue-resize/dist/vue-resize.css"/>
297
<script src="vue.js"></script>
298
<script src="vue-resize/dist/vue-resize.min.js"></script>
299

300
<script>
301
// Auto-installs when Vue is globally available
302
// Or install manually: Vue.use(VueResize);
303
// Access component: VueResize.ResizeObserver
304
</script>
305
```
306

307
## Browser Compatibility
308

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

314
## Types
315

316
```javascript { .api }
317
/**
318
 * Main plugin export
319
 */
320
interface VueResizePlugin {
321
  install: (Vue: any) => void;
322
  version: string;
323
}
324

325
/**
326
 * Resize event notification data
327
 */
328
interface ResizeNotification {
329
  width: number;
330
  height: number;
331
}
332

333
/**
334
 * ResizeObserver component props
335
 */
336
interface ResizeObserverProps {
337
  emitOnMount: boolean;
338
  ignoreWidth: boolean;
339
  ignoreHeight: boolean;
340
}
341
```