๐ผ Pseudo Window 
Vue component to bind event-handlers or classes to window/document/body!
Insert pseudo-window anywhere in your template:
<pseudo-window @resize.passive="handleResize" />๐ Install
npm i vue-pseudo-window๐โโ๏ธ Why?
โจ Cleaner code No longer pollute your component with.addEventListener()&.removeEventListener()โป๏ธ Template API Use Vue's@eventsyntax to bind listeners to the window as like you would to any other element๐ช Robust Supports all event modifierscapture,passive, andonce. SSR friendly.๐ฅ Tiny 819 B Gzipped!
Before
<template>
...
</template>
<script>
export default {
// Your component would be polluted with event binding logic
mounted() {
window.addEventListener('resize', this.handleResize, { passive: true })
},
beforeDestroy() {
window.removeEventListener('resize', this.handleResize)
},
methods: {
handleResize() {
...
}
}
}
</script>After โจ
<template>
<div>
...
<!-- Insert pseudo-window anywhere in your template -->
<pseudo-window @resize.passive="handleResize" />
</div>
</template>
<script>
export default {
// Much cleaner!
methods: {
handleResize() {
...
}
}
}
</script>๐จโ๐ซ Demos 
Adding listeners to window
<template>
<div>
<div>
Window width: {{ winWidth }}
</div>
<pseudo-window
<!-- Handle window resize with "passive" option -->
@resize.passive="onResize"
/>
</div>
</template>
<script>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
data() {
return {
winWidth: 0
}
},
methods: {
onResize() {
this.winWidth = window.innerWidth;
}
}
}
</script>Adding class & listeners to document <html>
<template>
<div>
<pseudo-window
document
<!-- Add a class to <html> -->
:class="$style.lockScroll"
<!-- Handle document click -->
@click="onClick"
/>
</div>
</template>
<script>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
methods: {
onClick() {
console.log('Document click!')
}
}
}
</script>
<style module>
.lockScroll {
overflow: hidden;
}
</style>Adding class & listeners to body <body>
<template>
<div>
<pseudo-window
body
<!-- Add a class to <body> -->
:class="$style.lockScroll"
<!-- Handle body click -->
@click="onClick"
/>
</div>
</template>
<script>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
methods: {
onClick() {
console.log('Body click!')
}
}
}
</script>
<style module>
.lockScroll {
overflow: hidden;
}
</style>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.
<template>
<pseudo-window
@blur="pause"
@focus="resume"
>
<video>
<source
src="/media/examples/flower.webm"
type="video/webm"
>
</video>
</div>
</template>
<script>
import PseudoWindow from 'vue-pseudo-window';
export default {
components: {
PseudoWindow
},
methods: {
resume() {
this.$el.play()
},
pause() {
this.$el.pause()
}
}
}
</script>๐จโ๐ฉโ๐งโ๐ฆ Related
- vue-subslot -
๐ Pick 'n choose what you want from a slot passed into your Vue component - vue-proxi -
๐ Tiny proxy component for Vue.js - vue-vnode-syringe -
๐งฌ Mutate your vNodes with vNode Syringe๐