Package Exports

vue-resize-directive

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-resize-directive) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue.resize

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.

vue-resize-directive