win-vue

Components for adding event listeners to the window, document, and document.body in Vue.js.

Why?

For Options API users

While there are utilities like VueUse's useEventListener, they're not compatible with components using Vue's Options API. Even with setup(), these utilities cannot be used it references anything created in the Options API (e.g. methods).

Declarative syntax in the template

Listening to events on the window object is a common practice. However, doing this with window.addEventListener often leads to cluttered code, and cleaning it up may be forgotten. Being able to interact with the window object directly within the template by leveraging Vue’s event binding syntax will dramatically improve the readability of your code.

Install

npm install -D win-vue

Usage

<script setup>
import { Window } from 'win-vue'

const onResize = (event) => {
    console.log('resized', event)
}
</script>

<template>
    <Window @resize.passive="onResize" />
</template>