Vue directive to detect HTML resize events based on CSS Element Queries with deboucing and throttling capacity.

Use this option when you need to receive all the resize events.

<div v-resize="onResize">

Use throttle when you need to rate-limit resize events frequency.

• With default timeout (150 ms):

<div v-resize:throttle="onResize">

• With custom timeout (in ms):

<div v-resize:throttle.100="onResize">

Use debounce when you only need to be notified when resize events ends.

• With default timeout (150 ms):

<div v-resize:debounce="onResize">

• With custom timeout (in ms):

<div v-resize:debounce.50="onResize">

• Available through npm:

 npm install vue-resize-directive --save

• For Modules

// ES6
import resize from 'vue-resize-directive'
//...
export default {
    directives: {
        resize,
    }
//...
  
// ES5
var resize = require('vue-resize-directive')

• For <script> Include

  Just include Vueresize.js after ResizeSensor.js from css-element-queries and lodash.js script.