Vue ON

Collection of window/document event handlers for Vue ^3.2.0composition api. Functions should be used only in SETUP phase. When component unmounts, events are automatically removed from window/document.

Events

onBeforeUnload

Same as window.onbeforeunload.

<script setup>
   import { onBeforeUnload } from '@kadiryazici/vue-on';
   onBeforeUnload((event /* BeforeUnloadEvent */) => {
      event.preventDefault();
      event.returnValue = '';
      return false;
   });
</script>

onConnectionStatusChange

This is single handler for both online/offline events in browser.

<script setup>
   import { onConnectionStatusChange } from '@kadiryazici/vue-on';
   onConnectionStatusChange((state /* 'online' | 'offline' */, event: Event) => {
      if (state === 'offline') {
         doSomething();
      } else {
         doAnotherThing();
      }
   });
</script>

onHashChange

Same as window.onhashchange.

<script setup>
   import { onHashChange } from '@kadiryazici/vue-on';
   onHashChange((event /* Event */) => {
      ...
   });
</script>

onOrientationChange

Same as window.ondeviceorientation.

<script setup>
   import { onOrientationChange } from '@kadiryazici/vue-on';
   onOrientationChange((event /* DeviceOrientationEvent */) => {
      const rotateDegrees = event.alpha;
      const leftToRight = event.gamma;
      const frontToBack = event.beta;
   });
</script>

onPopState

Same as window.onpopstate.

<script setup>
   import { onPopState } from '@kadiryazici/vue-on';
   onPopState((event /* PopStateEvent */) => {
      ...
   });
</script>

onVisibilityChange

Same as window.onvisibilitychange but first parameter is visibility state.

<script setup>
   import { onVisibilityChange } from '@kadiryazici/vue-on';
   onVisibilityChange((state: /* 'hidden' | 'visible' */, event /* Event */) => {
      ...
   });
</script>

onPaste

Same as window.onpaste.

<script setup>
   import { onPaste } from '@kadiryazici/vue-on';
   onPaste((event /* ClipBoardEvent */) => {
      ...
   });
</script>