# vue-resize-directive

> Vue.js 2.0 directive to detect element resize

Latest version **1.2.0** (published 2019-03-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-resize-directive
pnpm add vue-resize-directive
yarn add vue-resize-directive
bun add vue-resize-directive
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.2.0 |
| Published | 2019-03-16 |
| First published | 2017-01-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >= 4.0.0 |
| Dependencies | 3 |
| Unpacked size | 133.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 321 |
| Author | David Desmaisons |
| Maintainers | davidesmaisons |
| Keywords | vue, vuejs, web-components |

## Links

- npm: https://www.npmjs.com/package/vue-resize-directive
- Repository: https://github.com/David-Desmaisons/Vue.resize
- Homepage: https://github.com/David-Desmaisons/Vue.resize#readme
- Issues: https://github.com/David-Desmaisons/Vue.resize/issues
- npm.io page: https://npm.io/package/vue-resize-directive

## Dependencies (3)

- [lodash.debounce](https://npm.io/package/lodash.debounce.md) ^4.0.8
- [css-element-queries](https://npm.io/package/css-element-queries.md) ^1.0.2
- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.5.0

## Recent versions

- 1.2.0 (latest) — 2019-03-16
- 1.1.4 — 2018-09-27
- 1.1.3 — 2018-09-27
- 1.1.2 — 2018-09-26
- 1.1.1 — 2018-09-08
- 1.1.0 — 2018-09-02
- 1.0.1 — 2018-03-06
- 1.0.0 — 2017-01-09

## README

# Vue.resize

[![GitHub open issues](https://img.shields.io/github/issues/David-Desmaisons/Vue.resize.svg?maxAge=20)](https://github.com/David-Desmaisons/Vue.resize/issues?q=is%3Aopen+is%3Aissue)
[![GitHub closed issues](https://img.shields.io/github/issues-closed/David-Desmaisons/Vue.resize.svg?maxAge=20)](https://github.com/David-Desmaisons/Vue.resize/issues?q=is%3Aissue+is%3Aclosed)
[![Npm download](https://img.shields.io/npm/dt/vue-resize-directive.svg?maxAge=20)](https://www.npmjs.com/package/vue-resize-directive)
[![Npm version](https://img.shields.io/npm/v/vue-resize-directive.svg?maxAge=20)](https://www.npmjs.com/package/vue-resize-directive)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
[![MIT License](https://img.shields.io/github/license/David-Desmaisons/Vue.resize.svg)](https://github.com/David-Desmaisons/Vue.resize/blob/master/LICENSE)

Vue directive to detect HTML resize events based on [CSS Element Queries](https://github.com/marcj/css-element-queries) with debouncing and throttling capacity.

## Demo

![demo gif](vueresize.gif)


## Typical usage

### Simple
Use this option when you need to receive all the resize events.

The `onResize` function will be called each time the element resizes with the corresponding HTML element as only argument.

```javascript
<div v-resize="onResize">
```

### Throttle
Use throttle when you need to rate-limit resize events frequency.


* With default timeout (150 ms):
```HTML
<div v-resize:throttle="onResize">
```

* With custom timeout (in ms):
```HTML
<div v-resize:throttle.100="onResize">
```

### Debounce
Use debounce when you only need to be notified when resize events ends.

* With default timeout (150 ms):
```HTML
<div v-resize:debounce="onResize">
```

* With custom timeout (in ms):
```HTML
<div v-resize:debounce.50="onResize">
```

### Initial
Use this option to receive the resize callback right after the element is mounted on the DOM and visible.

```HTML
<div v-resize.initial="onResize">
```

## Installation

- Available through npm:
``` js
 npm install vue-resize-directive --save
```

- For Modules

``` js
// ES6
import resize from 'vue-resize-directive'
//...
export default {
    directives: {
        resize,
    }
//...
  
// ES5
var resize = require('vue-resize-directive')
```

- #### For `<script>` Include

  Just include `Vueresize.js` after `ResizeSensor.js` from [css-element-queries](https://github.com/marcj/css-element-queries) and `lodash.js` script.<br>

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