# πŸ–Ό Pseudo Window Vue component to bind event-handlers or classes to `window`/`document`/`body`! Insert pseudo-window anywhere in your template: ```html ``` πŸ‘‰ Try out a [demo in this CodePen](https://codepen.io/privatenumber/pen/qBqEOGa)! ## πŸš€ Install ```sh npm i vue-pseudo-window ``` ## πŸ™‹β€β™‚οΈ Why? - ✨ **Cleaner code** No longer pollute your component with `.addEventListener()` & `.removeEventListener()` - ♻️ **Template API** Use Vue's `@event` syntax to bind listeners to the window as like you would to any other element - πŸ’ͺ **Robust** Supports all event modifiers `capture`, `passive`, and `once`. SSR friendly. - πŸ₯ **Tiny** 819 B Gzipped! ### Before ```html ``` ### After ✨ ```html ``` ## πŸ‘¨β€πŸ« Demos [![JSFiddle Demo](https://flat.badgen.net/badge/JSFiddle/Open%20Demo/blue)](https://jsfiddle.net/hirokiosame/p5Lz419s/)
Adding listeners to window
```html ```
Adding class & listeners to document <html>
```html ```
Adding class & listeners to body <body>
```html ```
Only want one root element?
PseudoWindow is a functional component that returns exactly what's passed into it. By using it as the root component, its contents will pass-through. ```html ```
## πŸ‘¨β€πŸ‘©β€πŸ‘§β€πŸ‘¦ Related - [vue-subslot](https://github.com/privatenumber/vue-subslot) - πŸ’ Pick 'n choose what you want from a slot passed into your Vue component - [vue-proxi](https://github.com/privatenumber/vue-proxi) - πŸ’  Tiny proxy component for Vue.js - [vue-vnode-syringe](https://github.com/privatenumber/vue-vnode-syringe) - 🧬Mutate your vNodes with vNode Syringe πŸ’‰