A Vue component that registers global keyboard and mouse events on the document or window.
vue-global-events is a Vue library that allows developers to register global keyboard and mouse event listeners directly in their Vue templates. It solves the problem of managing application-wide shortcuts and interactions by providing a declarative, component-based API that automatically handles listener lifecycle and works with Vue's event modifiers.
Vue developers building interactive applications that require keyboard shortcuts, global mouse events, or complex event handling beyond individual DOM elements.
Developers choose vue-global-events because it integrates global event handling into Vue's familiar template syntax, eliminating the need for manual `addEventListener`/`removeEventListener` calls and providing built-in support for conditional activation, filtering, and SSR.
⌨️ Register global events as a component
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Enables registration of global events using Vue's familiar template syntax with modifiers like .prevent and .ctrl, as shown in the usage examples, making it intuitive for Vue developers.
Events can be easily toggled with a v-if directive, automatically managing addEventListener and removeEventListener calls without manual cleanup.
Explicitly designed for server-side rendering, ensuring seamless integration in universal Vue applications without hydration issues.
Provides a configurable filter prop to prevent event execution based on the triggering element, event name, or handler, as demonstrated in the README with input element exclusion.
The target prop for specifying document or window is not reactive; changing it requires adding a key attribute as a workaround, adding complexity for dynamic scenarios.
Cannot prevent default behavior for system-level shortcuts like Ctrl+Tab or Ctrl+W, as noted in the caveats, limiting its effectiveness for overriding all keyboard events.
Tightly coupled with Vue.js, making it unsuitable for projects using other frameworks or vanilla JavaScript, and requiring Vue-specific knowledge.