Vue directive to detect resize events with deboucing and throttling capacity.

Overview

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')
Owner
Pixel Lab
Pixel Lab
This app is used to record keyboard or mouse events, during which the keyboard or mouse events can be exported as a file with a toca suffix

This app is used to record keyboard or mouse events, during which the keyboard or mouse events can be exported as a file with a toca suffix. And read this file through the playback function of this app for playback and reproduction.

null 0 Aug 14, 2022
Vue.js 2.0 directive to detect images loading

Vue.ImagesLoaded A Vue.js 2.0 directive to detect when images have been loaded, based on imagesLoaded This directive allows to get a callback when chi

David Desmaisons 146 Apr 20, 2022
A vue directive which automatically resize font size based on element width.

Vue Resize Text A vue directive which automatically resize font size based on element width. It makes the font-size flexible on fluid or responsive la

Jayesh Vachhani 64 Jul 26, 2022
A vue3 directive which automatically resize font size based on element width.

Vue3 Resize Text A vue3 directive which automatically resize font size based on element width. It makes the font-size flexible on fluid or responsive

Jayesh Vachhani 3 Jun 3, 2022
:electric_plug: Simple VueJS component to detect offline & online changes.

V-Offline ⚡ Detect offline & online events for your vue app. This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you lik

Vinayak Kulkarni 352 Sep 7, 2022
detect container resizing

vue-resize-sensor detect container resizing. event based no window.onresize no interval/timeout detection no CSS modifications no Javascript-Framework

Franck Freiburger 75 Nov 7, 2021
Detect DOM element resizing based on Vue3.x

Detect DOM element resizing based on Vue3.x

null 0 Jul 22, 2021
Detect when an element is becoming visible or hidden on the page.

vue-observe-visibility Detect when an element is becoming visible or hidden on the page. Demo Sponsors Table of contents Installation Usage Example In

Terminalqo 0 Oct 27, 2020
A very simple vue component to have a window width and height reactive values on window resize.

A very simple vue component to have a window width and height reactive values on window resize.

Nazar Stefaniuk 0 Apr 5, 2020
Vue Element Resize Detector Wrapper

vue-element-resize-detector Vue Directive to detect resize events on elements or components. Uses element Resize Detector under the hood ⚙️ Installati

Ben Sladden 17 Aug 12, 2022