Resize Observer Directive For Vue.js

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;
    }
  }
}

Preview:

Download Details:

Author: wangweiwei

Live Demo: https://www.ellow.cn/examples/vue-resize-observer/index.html

Download Link: https://github.com/wangweiwei/vue-resize-observer/archive/master.zip

Official Website: https://github.com/wangweiwei/vue-resize-observer

Install & Download:

# NPM
$ npm i vue-resize-observ[email protected]

You Might Be Interested In: