useResizeWatcher

Composition API hook that calls a function on every window resize event. Handles mount/unmount and keep-alive activate/deactivate lifecycles automatically.

Import

import { useResizeWatcher } from '@zyno-io/vue-foundation';

Usage

import { useResizeWatcher } from '@zyno-io/vue-foundation';

useResizeWatcher(() => {
    recalculateLayout();
});

Call useResizeWatcher inside a component's setup function. The callback is registered as a resize event listener on window when the component mounts, and removed when it unmounts.

Lifecycle

Lifecycle Hook	Action
onMounted	Adds resize listener on window
onActivated	Re-adds listener (for keep-alive)
onDeactivated	Removes listener (for keep-alive)
onBeforeUnmount	Removes listener

Example: Responsive Layout

<script setup>
import { ref } from 'vue';
import { useResizeWatcher } from '@zyno-io/vue-foundation';

const columns = ref(3);

function updateColumns() {
    if (window.innerWidth < 640) columns.value = 1;
    else if (window.innerWidth < 1024) columns.value = 2;
    else columns.value = 3;
}

useResizeWatcher(updateColumns);
</script>

Demo

<template>
    <div>
        <div style="border: 1px solid var(--vp-c-divider); border-radius: 8px; padding: 20px; max-width: 400px; text-align: center">
            <p style="margin: 0 0 8px 0; font-size: 14px; color: var(--vp-c-text-2)">Window dimensions (resize to update):</p>
            <p style="margin: 0; font-size: 24px; font-weight: 600">{{ width }} x {{ height }}</p>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { useResizeWatcher } from '@zyno-io/vue-foundation';
import { onMounted, ref } from 'vue';

const width = ref(0);
const height = ref(0);

function updateDimensions() {
    width.value = window.innerWidth;
    height.value = window.innerHeight;
}

onMounted(updateDimensions);
useResizeWatcher(updateDimensions);
</script>