# v-resize-observer

> Resize observer for Vue. Detect size changes of DOM elements. Support Vue's directive and component.

Latest version **2.1.0** (published 2023-11-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install v-resize-observer
pnpm add v-resize-observer
yarn add v-resize-observer
bun add v-resize-observer
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.1.0 |
| Published | 2023-11-02 |
| First published | 2021-10-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 40.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Mervin |
| Maintainers | mengqing723 |
| Keywords | vue-resize, vue-resize-observer, vue-resize-component, vue-resize-directive, resize-observer, detect-size, vue, resize, ResizeObserver |

## Links

- npm: https://www.npmjs.com/package/v-resize-observer
- Repository: https://github.com/Meqn/v-resize-observer
- Homepage: https://github.com/Meqn/v-resize-observer#readme
- Issues: https://github.com/Meqn/v-resize-observer/issues
- npm.io page: https://npm.io/package/v-resize-observer

## Dependencies (2)

- [vue-demi](https://npm.io/package/vue-demi.md) latest
- [resize-observer-polyfill](https://npm.io/package/resize-observer-polyfill.md) ^1.5.1

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 2.1.0 (latest) — 2023-11-02
- 2.0.2 — 2023-06-06
- 2.0.1 — 2023-05-11
- 2.0.0 — 2023-05-11
- 1.6.3 — 2022-03-30
- 1.6.2 — 2022-03-25
- 1.6.1 — 2022-03-19
- 1.6.0 — 2021-11-02
- 1.5.0 — 2021-10-22
- 1.4.5 — 2021-10-21
- 1.4.3 — 2021-10-21
- 1.4.2 — 2021-10-21
- 1.4.1 — 2021-10-21
- 1.3.0 — 2021-10-20
- 1.2.1 — 2021-10-20
- … 1 more at https://npm.io/package/v-resize-observer/versions

## README

# v-resize-observer

[![version](https://img.shields.io/npm/v/v-resize-observer?style=flat-square)](https://www.npmjs.com/package/v-resize-observer)
[![download](https://img.shields.io/npm/dm/v-resize-observer?style=flat-square)](https://www.npmjs.com/package/v-resize-observer)
[![languages](https://img.shields.io/github/languages/top/meqn/v-resize-observer?style=flat-square)](https://github.com/Meqn/v-resize-observer)
[![license](https://img.shields.io/npm/l/v-resize-observer?style=flat-square)](https://github.com/Meqn/v-resize-observer)
![vue@2.x](https://img.shields.io/badge/Vue-2.x-brightgreen?style=flat-square)
![vue@3.x](https://img.shields.io/badge/Vue-3.x-brightgreen?style=flat-square)



[ [English](https://github.com/Meqn/v-resize-observer/blob/main/libs/README.zh_CN.md) | [中文](https://github.com/Meqn/v-resize-observer/blob/main/libs/README.zh_CN.md) ]



Resize observer for Vue.  
Detect size changes of DOM elements. Support Vue's directive and component.

- [Vue2 Live](https://stackblitz.com/edit/vite-vue2-resize-demo?file=src%2FApp.vue)
- [Vue3 Live](https://stackblitz.com/edit/vite-vue3-resize-demo?file=src%2FApp.vue)


## Feature
- 🕰 Based on `ResizeObservable API` implementation
- 🎁 Support `vue2` and `vue3`
- 💊 Support the use of directives or components
- 🧲 Optimize the frequency of triggering resize events
- 🛠 Support browsers: IE9+/Edge/Chrome/Safari/Firefox



## Install

**npm**
```
npm install v-resize-observer
```

**browser**
```html
<script src="https://cdn.jsdelivr.net/npm/vue-demi/lib/index.iife.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/v-resize-observer/dist/index.iife.js"></script>
```


## Usage

- [Vue2.x Example](https://github.com/Meqn/v-resize-observer/tree/main/examples/vue2)
- [Vue3.x Example](https://github.com/Meqn/v-resize-observer/tree/main/examples/vue3)

```html
<template>
  <div id="app">
    <!-- directives -->
    <div v-resize:50.immediate="onResize">
      Listened to elements
    </div>
    
    <!-- Components -->
    <ResizeComponent @resize="onResize" :delay="100" :disabled="disabled">
      <div>Listened to elements</div>
    </ResizeComponent>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ResizeComponent, resizeDirective as vResize } from 'v-resize-observer'

const disabled = ref(false)

function onResize({ width, height }, target) {
  console.log(target, width, height)
}
</script>
```

### 1. Global Configuration
```js
// main.js
import Resizer from 'v-resize-observer'

// vue@3.x
const app = createApp(App)
app.use(Resizer, {
  // Custom command names and component names
  directive: 'resize',
  component: 'ResizeComponent'
})

// vue@2.x
Vue.use(Resizer)
```

### 2. On demand
```html
<script setup>
import { ref } from 'vue'
import {
  ResizeComponent,
  resizeDirective as vResizeObserver //You can change the directive name, the default: `v-resize, 
} from 'v-resize-observer'

// OR
// import Resizer from 'v-resize-observer'
// const ResizeComponent = Resizer.component
// const vResize = Resizer.directive

function onResize({ width, height }, target) {
  console.log(target, width, height)
}
</script>

<template>
  <div id="app">
    <!-- directives -->
    <div v-resize-observer:100="onResize">
      Listened to elements
    </div>
    
    <!-- Components -->
    <ResizeComponent @resize="onResize">
      <div>Listened to elements</div>
    </ResizeComponent>
  </div>
</template>
```
立即执行一次callback

## API
| Parameter  | Type                    | Default | Description                                             |
| ---------- | ----------------------- | ------- | ------------------------------------------------------- |
| `target`   | `string`, `HTMLElement` | -       | Target elements to listen to                            |
| `delay`    | `number`                | `150`   | Delayed execution time                                  |
| `immediate` | `boolean`               | `false` | executed immediately                                       |
| `disabled` | `boolean`               | `false` | disable listening                                       |
| `resize`   | `function`              | -       | Callback function to listen for changes in element size |


`resize(data, target)`
- `data` : elements size `{ width, height }`
- `target` : Listening elements


## use `directive`

> The directive default name is `v-resize`, if you want to change it, you can specify it when you import it.


```html
<div v-resize="onResize" />

<div v-resize:100="onResize" />
<div v-resize:100.immediate="onResize" />
<!-- No limit on trigger frequency -->
<div v-resize:0="onResize" />
```
**Parameter：**
- `arg`: => `delay`
- `value`: => `resize`
- `modifiers.immediate`


## use `Component`
```html
<ResizeComponent target="#app" :delay="0" disabled="false" @resize="onResize">
  <div>Listened to elements</div>
</ResizeComponent>
```
### props
- `target`: The target element to listen to, the default current element.
- `delay`: Delay execution time, default: `150`.
- `immediate`: Execute immediately, default: `false`.
- `disabled`: disable listening, default: `false`.

### events
- `resize`: Triggered when listening for element size changes.



## ChangeLog

### v2.0.0
#### 🚀 Features
- feat: compatible with vue2.x and 3.x;
- feat: add Typescript type hints;
- feat: support for global registration of custom directive names and component names;
- feat: add re-listening function;
- perf: remove the `limiter` trigger limit option;
- perf: change the delay time `wait` to `delay`;

#### 🐞 Bug Fixes
- fix: Fixed failure to listen again after disabling listening.

### v1.x
- [v1.x Documents](https://meqn.github.io/v-resize-observer/)

---
_Source: https://npm.io/package/v-resize-observer · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._