# vue-resize

> Detects DOM element resizing

Latest version **1.0.1** (published 2021-03-19) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2021-03-19 |
| First published | 2016-12-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 46.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 506 |
| Author | Guillaume Chau |
| Maintainers | akryum |
| Keywords | vue, vuejs, plugin |

## Links

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

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.13.10

## Recent versions

- 1.0.1 (latest) — 2021-03-19
- 2.0.0-alpha.1 (next) — 2020-12-29
- 1.0.0 — 2020-12-29
- 0.5.0 — 2020-04-12
- 0.4.5 — 2018-12-21
- 0.4.4 — 2018-02-24
- 0.4.3 — 2017-10-28
- 0.4.2 — 2017-09-18
- 0.4.1 — 2017-09-18
- 0.4.0 — 2017-09-18
- 0.3.0 — 2017-09-18
- 0.2.1 — 2017-09-06
- 0.2.0 — 2017-09-06
- 0.1.4 — 2017-08-03
- 0.1.3 — 2017-05-17
- … 5 more at https://npm.io/package/vue-resize/versions

## README

# vue-resize

[![npm](https://img.shields.io/npm/v/vue-resize.svg) ![npm](https://img.shields.io/npm/dm/vue-resize.svg)](https://www.npmjs.com/package/vue-resize)
[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)

Detect DOM element resizing

[JSFiddle](https://jsfiddle.net/Akryum/zqygwf3r/)

<p>
  <a href="https://www.patreon.com/akryum" target="_blank">
    <img src="https://c5.patreon.com/external/logo/become_a_patron_button.png" alt="Become a Patreon">
  </a>
</p>

## Sponsors

[![sponsors logos](https://guillaume-chau.info/sponsors.png)](https://guillaume-chau.info/sponsors)

<br>

# Installation

```
npm install --save vue-resize
```

## Module import

**⚠️ You need to include the package CSS:**

```js
import 'vue-resize/dist/vue-resize.css'
```

Then import the package and install it into Vue:

```javascript
import Vue from 'vue'
import VueResize from 'vue-resize'

Vue.use(VueResize)
```

Or:

```javascript
import Vue from 'vue'
import { ResizeObserver } from 'vue-resize'

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

## Browser

```html
<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>
```

The plugin should be auto-installed. If not, you can install it manually:

```javascript
Vue.use(VueResize)
```

Or:

```javascript
Vue.component('resize-observer', VueResize.ResizeObserver)
```

# Usage

Add the `<resize-observer>` inside a DOM element and make its position to something other than `'static'` (for example `'relative'`), so that the observer can fill it.

Listen to the `notify` event that is fired when the above DOM element is resized.

# Example

```html
<template>
  <div class="demo">
    <h1>Hello world!</h1>
    <resize-observer @notify="handleResize" />
  </div>
</template>

<script>
export default {
  methods: {
    handleResize ({ width, height }) {
      console.log('resized', width, height)
    }
  }
}
</script>

<style scoped>
.demo {
  position: relative;
}
</style>
```

---

## License

[MIT](http://opensource.org/licenses/MIT)

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