Vue on resize

Vue plugin for resize handlers.

Reduce your old code:

mounted() {
  const resizeHandler = e => {
    // handler code
  }
  resizeHandler()
  
  const debouncedHandler = debounce(resizeHandler, 250)
  window.addEventListener('resize', debouncedHandler)
  this.$once('hook:beforeDestroy', () => {
    window.removeEventListener('resize', debouncedHandler)
  })
}

to simple:

mounted() {
  this.$onResize(width => {
    // ... handler code
  }).fire()
}

Installation

Install package in your project

$ npm install @sparing-software/vue-on-resize

Configuration

import Vue from 'vue'
import VueOnResize from '@sparing-software/vue-on-resize'

Vue.use(VueOnResize)

Examples

Simple usage:

mounted() {
  this.$onResize(width => {
    // ... handler code
  })
}

Immediately execute callback:

mounted() {
  this.$onResize(width => {
    // ... handler code
  }).fire()
}

Programmatically execute callback:

mounted() {
  const resizeHandler = this.$onResize(width => {
     // ... handler code
  }).fire()

  resizeHandler.fire()
}

Custom debounce time (default 250ms):

mounted() {
  this.$onResize(width => {
    // ... handler code
  }, 100)
}

Get more info about resize event:

mounted() {
  this.$onResize((windowWidth, windowHeight, event) => {
    // ... handler code
  })
}

Contributing

Want to help improve this plugin? Great!
Project is open-source so fork repo and join us!

License

MIT License © Sparing Interactive