Skip to content

Instantly share code, notes, and snippets.



Created Feb 20, 2020
What would you like to do?
Vue Page-Wide Events

Vue Page-Wide Events

This is a Vue mixin factory for handling events that occur outside of your Vue component. Listeners are detached automatically when the component is destroyed.

import on from 'events.mjs'

new Vue({
  mixins: {
    // With callback closure
    on(window, 'resize', function(event) {
      // Handle resize
    // With method name
    on(document, 'visibilitychange', 'handleVisibilityChange')
  methods: {
    handleVisibilityChange(event) {
      // Handle visibility change

Note that the above code may throw an error in an SSR environment (e.g. with Nuxt) because window does not exist on the server side. To work around this, instead of passing the window object directly, you may instead pass a function returning the window:

on(() => window, 'resize', function() {
  // ...
export default function on(target, event, listener) {
let targetObject, boundListener
return {
mounted() {
// Allow functions for client-only targets
targetObject = typeof target === 'function' ? target() : target
if (typeof listener === 'string') {
// If a string is passed as a listener, use a method with that name
boundListener = this[listener]
} else {
// If listener is a function, create a version of it bound to the Vue instance
boundListener = listener.bind(this)
targetObject.addEventListener(event, boundListener)
destroyed() {
targetObject.removeEventListener(event, boundListener)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.