Resize Observer Directive For Vue.js

Install & Download:

# NPM
$ npm i vue-resize-observer@next

Description:

An easy resize observer directive for Vue.js 3 and 2.

Basic usage:

1. Import and register the Resize Observer.

import VueResizeObserver from "vue-resize-observer";
// for Vue 3.0
const app = createApp(App)
app.use(VueResizeObserver)
app.mount('#app')
// for Vue2.0
Vue.use(VueResizeObserver);

2. Detect resize event on an element.

<div class="resize" v-resize="onResize">
  width: {{width}}, height: {{height}}
</div>

export default {
  data() {
    return {
      width: 0,
      height: 0,
    }
  },
  mounted() {
    this.width = this.$el.offsetWidth;
    this.height = this.$el.offsetHeight;
  },
  methods: {
    onResize({ width, height }) {
      this.width = width;
      this.height = height;
    }
  }
}