English | [简体中文](https://github.com/wangweiwei/vue-resize-observer/blob/master/README.zh.md)
## Installation
- Vue3.0
``` sh
npm install --save vue-resize-observer@next
```
- Vue2.0
``` sh
npm install --save vue-resize-observer
```
## Module import & Example
* Import the package and install it into Vue:
``` js
const VueResizeObserver = require("vue-resize-observer");
// Vue3.0
const app = createApp(App)
app.use(VueResizeObserver) // use is a instance's method & be called before mount
app.mount('#app')
// Vue2.0
Vue.use(VueResizeObserver); // use is a static method
```
or
``` js
import VueResizeObserver from "vue-resize-observer";
Vue.use(VueResizeObserver);
// Vue3.0
const app = createApp(App)
app.use(VueResizeObserver) // use is a instance's method & be called before mount
app.mount('#app')
// Vue2.0
Vue.use(VueResizeObserver); // use is a static method
```
or
``` js
import VueResizeObserver from "vue-resize-observer";
// Vue3.0
Vue.createApp({
directives: { 'resize': VueResizeObserver },
})
// Vue2.0
new Vue({
directives: { 'resize': VueResizeObserver },
})
```
* Then `v-resize` directive to detect DOM resize events.
``` vue
width: {{width}}, height: {{height}}
```
## Example
[](https://www.ellow.cn/examples/vue-resize-observer/index.html)
## Documentation
``` sh
npm run doc
```
Or read the documentation online
[](https://www.ellow.cn/docs/vue-resize-observer/index.html)
## ⚠️ Notice
Set the `v-resize` directive for a DOM element and make the element position to something other than 'static' (for example 'relative').
## Dependency
[](https://david-dm.org/wangweiwei/vue-resize-observer)
[](https://david-dm.org/wangweiwei/vue-resize-observer?type=dev)
## License
[](https://github.com/wangweiwei/vue-resize-observer/blob/master/LICENSE)
Copyright (c) 2020-present, Wayne
