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));
+    useEventListener(window, 'keydown', onKeydown);
-    onBeforeUnmount(() => window.removeEventListener('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(() => {
+    useEventListener(
-        if (typeof window === 'undefined') {
+        typeof window !== 'undefined' ? window : undefined,
-            return;
+        NAV_LAYOUT_UPDATED_EVENT,
-        }
+        handleExternalNavLayoutUpdate
-        window.addEventListener(
+    );
-            NAV_LAYOUT_UPDATED_EVENT,
-            handleExternalNavLayoutUpdate
-        );
-    });
-
-    onUnmounted(() => {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        window.removeEventListener(
-            NAV_LAYOUT_UPDATED_EVENT,
-            handleExternalNavLayoutUpdate
-        );
-    });
 
     return {
         navLayout,

src/composables/useToolNavPinning.js

@@ -1,4 +1,5 @@
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { useEventListener } from '@vueuse/core';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { toast } from 'vue-sonner';
 
@@ -243,22 +244,11 @@ export function useToolNavPinning() {
         dispatchNavLayoutUpdated();
     };
 
-    onMounted(() => {
+    useEventListener(
-        if (typeof window === 'undefined') {
+        typeof window !== 'undefined' ? window : undefined,
-            return;
+        NAV_LAYOUT_UPDATED_EVENT,
-        }
+        refreshPinnedState
-        window.addEventListener(NAV_LAYOUT_UPDATED_EVENT, refreshPinnedState);
+    );
-    });
-
-    onUnmounted(() => {
-        if (typeof window === 'undefined') {
-            return;
-        }
-        window.removeEventListener(
-            NAV_LAYOUT_UPDATED_EVENT,
-            refreshPinnedState
-        );
-    });
 
     return {
         pinnedToolKeys: computed(() => pinnedToolKeysRef.value),

src/views/Charts/components/MutualFriends.vue

@@ -244,6 +244,7 @@
 <script setup>
     defineOptions({ name: 'ChartsMutual' });
 
+    import { useLocalStorage } from '@vueuse/core';
     import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
     import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
     import { Field, FieldContent, FieldGroup, FieldLabel } from '@/components/ui/field';
@@ -516,24 +517,9 @@
     const selectedFriendId = ref(null);
 
     const EXCLUDED_FRIENDS_KEY = 'VRCX_MutualGraphExcludedFriends';
-    const excludedFriendIds = ref(loadExcludedFriends());
+    const excludedFriendIds = useLocalStorage(EXCLUDED_FRIENDS_KEY, []);
-
-    function loadExcludedFriends() {
-        try {
-            const stored = localStorage.getItem(EXCLUDED_FRIENDS_KEY);
-            if (stored) return JSON.parse(stored);
-        } catch {
-            /* ignore */
-        }
-        return [];
-    }
-
-    function saveExcludedFriends() {
-        localStorage.setItem(EXCLUDED_FRIENDS_KEY, JSON.stringify(excludedFriendIds.value));
-    }
 
     watch(excludedFriendIds, async () => {
-        saveExcludedFriends();
         if (lastMutualMap) {
             try {
                 await applyGraph(lastMutualMap);

src/views/Favorites/composables/useFavoritesCardScaling.js

@@ -2,10 +2,10 @@ import {
     computed,
     nextTick,
     onBeforeMount,
-    onBeforeUnmount,
     ref,
     watch
 } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
 
 import configRepository from '../../../services/config.js';
 
@@ -58,9 +58,6 @@ export function useFavoritesCardScaling(options = {}) {
     const containerRef = ref(null);
     const containerWidth = ref(0);
 
-    let resizeObserver;
-    let cleanupWindowResize;
-
     const updateContainerWidth = (el = containerRef.value) => {
         const element = el ?? containerRef.value;
         if (!element) {
@@ -73,17 +70,6 @@ export function useFavoritesCardScaling(options = {}) {
         );
     };
 
-    const disconnectResizeObserver = () => {
-        if (resizeObserver) {
-            resizeObserver.disconnect();
-            resizeObserver = undefined;
-        }
-        if (cleanupWindowResize) {
-            cleanupWindowResize();
-            cleanupWindowResize = undefined;
-        }
-    };
-
     const cardScale = computed({
         get: () => cardScaleBase.value,
         set: (value) => {
@@ -212,46 +198,21 @@ export function useFavoritesCardScaling(options = {}) {
     watch(
         containerRef,
         (element) => {
-            disconnectResizeObserver();
             if (!element) {
                 containerWidth.value = 0;
                 return;
             }
 
             nextTick(() => updateContainerWidth(element));
-
-            if (typeof ResizeObserver !== 'undefined') {
-                const observedElement = element;
-                resizeObserver = new ResizeObserver((entries) => {
-                    if (!entries?.length) {
-                        return;
-                    }
-                    const [entry] = entries;
-                    const width =
-                        entry.contentRect?.width ??
-                        observedElement?.clientWidth ??
-                        0;
-                    containerWidth.value = Math.max(width, 0);
-                });
-                resizeObserver.observe(element);
-                return;
-            }
-
-            if (typeof window !== 'undefined') {
-                const handleResize = () => updateContainerWidth(element);
-                window.addEventListener('resize', handleResize, {
-                    passive: true
-                });
-                cleanupWindowResize = () => {
-                    window.removeEventListener('resize', handleResize);
-                };
-            }
         },
         { immediate: true }
     );
 
-    onBeforeUnmount(() => {
+    useResizeObserver(containerRef, (entries) => {
-        disconnectResizeObserver();
+        const [entry] = entries;
+        const width =
+            entry?.contentRect?.width ?? containerRef.value?.clientWidth ?? 0;
+        containerWidth.value = Math.max(width, 0);
     });
 
     onBeforeMount(async () => {

src/views/FriendsLocations/FriendsLocations.vue

@@ -138,7 +138,8 @@
 </template>
 
 <script setup>
-    import { computed, nextTick, onBeforeMount, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue';
+    import { useResizeObserver } from '@vueuse/core';
+    import { computed, nextTick, onBeforeMount, onMounted, reactive, ref, watch } from 'vue';
     import { ChevronDown, Loader2, Settings } from 'lucide-vue-next';
     import { Field, FieldContent, FieldLabel } from '@/components/ui/field';
     import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
@@ -262,8 +263,6 @@
     const gridWidth = ref(0);
     let measureScheduled = false;
     let pendingGridWidthUpdate = false;
-    let resizeObserver;
-    let cleanupResize;
 
     const updateGridWidth = () => {
         const wrap = scrollbarRef.value;
@@ -275,45 +274,19 @@
     };
 
     const setupResizeHandling = () => {
-        if (cleanupResize) {
-            cleanupResize();
-            cleanupResize = undefined;
-        }
-
         const wrap = scrollbarRef.value;
         if (!wrap) {
             return;
         }
 
         updateGridWidth();
-
-        if (typeof ResizeObserver !== 'undefined') {
-            resizeObserver = new ResizeObserver((entries) => {
-                if (!entries || entries.length === 0) {
-                    return;
-                }
-                const [entry] = entries;
-                gridWidth.value = entry.contentRect?.width ?? wrap.clientWidth ?? 0;
-            });
-            resizeObserver.observe(wrap);
-            cleanupResize = () => {
-                resizeObserver?.disconnect();
-                resizeObserver = undefined;
-            };
-            return;
-        }
-
-        if (typeof window !== 'undefined') {
-            const handleResize = () => {
-                updateGridWidth();
-            };
-            window.addEventListener('resize', handleResize, { passive: true });
-            cleanupResize = () => {
-                window.removeEventListener('resize', handleResize);
-            };
-        }
     };
 
+    useResizeObserver(scrollbarRef, (entries) => {
+        const [entry] = entries;
+        gridWidth.value = entry?.contentRect?.width ?? scrollbarRef.value?.clientWidth ?? 0;
+    });
+
     const normalizedSearchTerm = computed(() => searchTerm.value.trim().toLowerCase());
 
     const toEntries = (list = [], instanceId) =>
@@ -905,13 +878,6 @@
         });
     });
 
-    onBeforeUnmount(() => {
-        if (cleanupResize) {
-            cleanupResize();
-            cleanupResize = undefined;
-        }
-    });
-
     /**
      *
      */

src/views/MyAvatars/composables/useAvatarCardGrid.js

@@ -2,10 +2,10 @@ import {
     computed,
     nextTick,
     onBeforeMount,
-    onBeforeUnmount,
     ref,
     watch
 } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
 
 import configRepository from '../../../services/config.js';
 
@@ -47,9 +47,6 @@ export function useAvatarCardGrid(options = {}) {
     const gridContainerRef = ref(null);
     const containerWidth = ref(0);
 
-    let resizeObserver;
-    let cleanupResize;
-
     const updateContainerWidth = (el) => {
         const element = el ?? gridContainerRef.value;
         if (!element) {
@@ -62,17 +59,6 @@ export function useAvatarCardGrid(options = {}) {
         );
     };
 
-    const disconnectResize = () => {
-        if (resizeObserver) {
-            resizeObserver.disconnect();
-            resizeObserver = undefined;
-        }
-        if (cleanupResize) {
-            cleanupResize();
-            cleanupResize = undefined;
-        }
-    };
-
     const cardScale = computed({
         get: () => cardScaleBase.value,
         set: (value) => {
@@ -207,39 +193,22 @@ export function useAvatarCardGrid(options = {}) {
     watch(
         gridContainerRef,
         (element) => {
-            disconnectResize();
             if (!element) {
                 containerWidth.value = 0;
                 return;
             }
             nextTick(() => updateContainerWidth(element));
-
-            if (typeof ResizeObserver !== 'undefined') {
-                resizeObserver = new ResizeObserver((entries) => {
-                    if (!entries?.length) return;
-                    const [entry] = entries;
-                    containerWidth.value = Math.max(
-                        entry.contentRect?.width ?? element.clientWidth ?? 0,
-                        0
-                    );
-                });
-                resizeObserver.observe(element);
-                return;
-            }
-
-            if (typeof window !== 'undefined') {
-                const handleResize = () => updateContainerWidth(element);
-                window.addEventListener('resize', handleResize, {
-                    passive: true
-                });
-                cleanupResize = () =>
-                    window.removeEventListener('resize', handleResize);
-            }
         },
         { immediate: true }
     );
 
-    onBeforeUnmount(() => disconnectResize());
+    useResizeObserver(gridContainerRef, (entries) => {
+        const [entry] = entries;
+        containerWidth.value = Math.max(
+            entry?.contentRect?.width ?? gridContainerRef.value?.clientWidth ?? 0,
+            0
+        );
+    });
 
     onBeforeMount(async () => {
         try {

src/views/Tools/ScreenshotMetadata.vue

@@ -148,7 +148,8 @@
 <script setup>
     import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
     import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from '@/components/ui/carousel';
-    import { onBeforeUnmount, onMounted, reactive, ref } from 'vue';
+    import { useEventListener } from '@vueuse/core';
+    import { onMounted, reactive, ref } from 'vue';
     import { useGalleryStore, useUserStore, useVrcxStore } from '@/stores';
     import { ArrowLeft } from 'lucide-vue-next';
     import { Badge } from '@/components/ui/badge';
@@ -198,11 +199,6 @@
         if (!screenshotMetadataDialog.metadata.filePath) {
             getAndDisplayLastScreenshot();
         }
-        window.addEventListener('keyup', handleComponentKeyup);
-    });
-
-    onBeforeUnmount(() => {
-        window.removeEventListener('keyup', handleComponentKeyup);
     });
 
     const handleComponentKeyup = (event) => {
@@ -220,6 +216,9 @@
         }
     };
 
+    useEventListener(window, 'keyup', handleComponentKeyup);
+
+
     /**
      *
      */