use vueuse

src/components/FullscreenImagePreview.vue

@@ -97,7 +97,8 @@
 
 <script setup>
     import { Copy, Download, RefreshCcw, RotateCcw, RotateCw, X, ZoomIn, ZoomOut } from 'lucide-vue-next';
-    import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
+    import { useEventListener } from '@vueuse/core';
+    import { computed, onBeforeUnmount, ref, watch } from 'vue';
     import { DialogContent as RekaDialogContent, DialogOverlay as RekaDialogOverlay, DialogPortal } from 'reka-ui';
     import { Button } from '@/components/ui/button';
     import { Dialog } from '@/components/ui/dialog';
@@ -285,8 +286,7 @@
         else if (e.key.toLowerCase() === 'r') rotateCW();
         else if (e.key === '0') resetTransform();
     }
-    onMounted(() => window.addEventListener('keydown', onKeydown));
-    onBeforeUnmount(() => window.removeEventListener('keydown', onKeydown));
+    useEventListener(window, 'keydown', onKeydown);
 
     async function copyImageToClipboard(url) {
         if (!url) return;

src/components/Timer.vue

@@ -2,7 +2,8 @@
     <span>{{ text }}</span>
 </template>
 <script setup>
-    import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+    import { useNow } from '@vueuse/core';
+    import { computed } from 'vue';
 
     import { timeToText } from '../shared/utils';
 
@@ -13,18 +14,8 @@
         }
     });
 
-    const now = ref(Date.now());
+    const now = useNow({ interval: 15000 });
     const text = computed(() => {
         return props.epoch ? timeToText(now.value - props.epoch) : '-';
     });
-
-    let timerId = null;
-    onMounted(() => {
-        timerId = setInterval(() => {
-            now.value = Date.now();
-        }, 15000);
-    });
-    onBeforeUnmount(() => {
-        clearInterval(timerId);
-    });
 </script>

src/components/nav-menu/composables/useNavLayout.js

@@ -1,4 +1,5 @@
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { computed, ref, watch } from 'vue';
 
 import configRepository from '../../../services/config';
 import {
@@ -312,25 +313,11 @@ export function useNavLayout({
         await loadNavMenuConfig();
     };
 
-    onMounted(() => {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        window.addEventListener(
-            NAV_LAYOUT_UPDATED_EVENT,
-            handleExternalNavLayoutUpdate
-        );
-    });
-
-    onUnmounted(() => {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        window.removeEventListener(
-            NAV_LAYOUT_UPDATED_EVENT,
-            handleExternalNavLayoutUpdate
-        );
-    });
+    useEventListener(
+        typeof window !== 'undefined' ? window : undefined,
+        NAV_LAYOUT_UPDATED_EVENT,
+        handleExternalNavLayoutUpdate
+    );
 
     return {
         navLayout,