Skip to content
Vue directive to detect resize events with deboucing and throttling capacity.
Branch: master
Clone or download
Latest commit 2086327 Mar 16, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build make dist umd + improve example Jan 8, 2017
config Improvement Jan 3, 2017
dist New version Mar 16, 2019
example Example and correction for issue#10 Mar 16, 2019
src Example and correction for issue#10 Mar 16, 2019
.babelrc First commit Jan 3, 2017
.editorconfig First commit Jan 3, 2017
.gitignore First commit Jan 3, 2017
LICENSE First commit Jan 3, 2017
README.md Update README.md Mar 16, 2019
isObject.js First commit Jan 3, 2017
package-lock.json Fire callback when element is first visible. Sep 27, 2018
package.json New version Mar 16, 2019
vueresize.gif update documentation Jan 9, 2017

README.md

Vue.resize

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 debouncing and throttling capacity.

Demo

demo gif

Typical usage

Simple

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

The onResize function will be called each time the element resizes with the corresponding HTML element as only argument.

<div v-resize="onResize">

Throttle

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">

Debounce

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">

Initial

Use this option to receive the resize callback right after the element is mounted on the DOM and visible.

<div v-resize.initial="onResize">

Installation

  • 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.

You can’t perform that action at this time.