# vue3-resize

> Detect DOM element resizing

Latest version **0.2.0** (published 2020-12-01) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2020-12-01 |
| First published | 2020-12-01 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 44.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 504 |
| Author | Guillaume Chau |
| Maintainers | yoonasy |
| Keywords | vue, vue3, vuejs, plugin |

## Links

- npm: https://www.npmjs.com/package/vue3-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/vue3-resize

## Recent versions

- 0.2.0 (latest) — 2020-12-01
- 0.1.0 — 2020-12-01
- 0.0.16 — 2020-12-01
- 0.0.15 — 2020-12-01
- 0.0.14 — 2020-12-01
- 0.0.13 — 2020-12-01
- 0.0.12 — 2020-12-01
- 0.0.11 — 2020-12-01
- 0.0.10 — 2020-12-01
- 0.0.9 — 2020-12-01
- 0.0.8 — 2020-12-01
- 0.0.6 — 2020-12-01
- 0.0.4 — 2020-12-01
- 0.0.3 — 2020-12-01
- 0.0.2 — 2020-12-01
- … 2 more at https://npm.io/package/vue3-resize/versions

## README

# vue3-resize

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

Detect DOM element resizing

[Demo](https://akryum.github.io/vue-resize/) - [JSFiddle](https://jsfiddle.net/yoonasy/9twLfxos/67/)

<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 vue3-resize
```

## Module import

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

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

Then import the package and install it into Vue:

```javascript
// main.js
import { createApp } from 'vue'
import App from './App.vue'
import Vue3Resize from 'vue3-resize'

createApp(App)
  .use(Vue3Resize)
  .mount('#app')
```

Or:

```javascript
import { createApp } from 'vue'
import App from './App.vue'
import { ResizeObserver } from 'vue3-resize'

const app = createApp(App)

app.component('resize-observer', ResizeObserver)
// or
app.component(ResizeObserver.name, ResizeObserver)


app.mount('#app')
```

## Browser

```html
<link rel="stylesheet" href="vue3-resize/dist/vue3-resize.css"/>

<script src="vue.js"></script>
<script src="vue3-resize/dist/vue3-resize.min.js"></script>
```

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

```javascript
app.use(Vue3Resize)
```

Or:

```javascript
Vue.component('resize-observer', Vue3Resize.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" :showTrigger="true" />
  </div>
</template>

<script>
export default {
  setup() {
    return {
      handleResize ({ width, height }) {
        console.log('resized', width, height)
      }
    }
  }
}
</script>
```

---

## License

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

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