VueGlobalResizePlugin.js

// http://wicky.nillia.ms/enquire.js/
// https://www.sitepoint.com/javascript-media-queries/
// https://modernweb.com/using-media-queries-in-javascript/
// https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
// https://coderwall.com/p/i817wa/one-line-function-to-detect-mobile-devices-with-javascript

const generateDebounce = require('lodash.debounce')

export default {
  install(Vue, options = {}) {
    const {
      test = () => { },
      always = () => { },
      onChange = () => { },
      debounceDelay = 0
    } = options
    onChange(test())
    let lastResult
    const debounce = generateDebounce(() => {
      always()
      const result = test()
      if (lastResult === result) {
        // Sweet, don't do anything
      } else {
        onChange(result)
      }
      lastResult = result
    }, debounceDelay)
    window.addEventListener('resize', debounce)
  }
}

// Usage:
import globalResize from '@/plugins/global-resize'

Vue.use(globalResize, {
  // Mind subscribers to the Resize event,
  // leveraging the result, may be affected
  // by the debounce delay and may need to
  // be adjusted to remain in sync.
  debounceDelay: 50,
  test: () => window.matchMedia(config.mediaQueries.small).matches,
  always: () => {
    // https://stackoverflow.com/questions/23757345/android-does-not-correctly-scroll-on-input-focus-if-not-body-element
    if (document.activeElement.tagName === 'INPUT') {
      window.setTimeout(function () {
        document.activeElement.scrollIntoViewIfNeeded()
      }, 0)
    }
  },
  onChange: payload => {
    store.commit(types.SET_IS_MOBILE, payload)
  }
})