Vue directive to detect resize events with deboucing and throttling capacity.
JavaScript Vue HTML
Switch branches/tags
Nothing to show


GitHub open issues GitHub closed issues Npm download Npm version vue2 MIT License

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


demo gif

Typical usage


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: {
// 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.