// composables/useWindowWidth.js
import { ref, onMounted, onUnmounted } from 'vue';

export function useWindowWidth() {
  const width = ref(window.innerWidth);

  function handleResize() {
    width.value = window.innerWidth;
  }

  onMounted(() => window.addEventListener('resize', handleResize));
  onUnmounted(() => window.removeEventListener('resize', handleResize));

  return width;
}


<!-- src/WidthDisplay.vue -->
<script setup>
import { useWindowWidth } from '../composables/useWindowWidth';
const width = useWindowWidth();
</script>

<template>
  <p>Window width: {{ width }}px</p>
</template>

<!--
  Notes:
  - The composable itself calls onMounted/onUnmounted; Vue ties those
    hooks to whichever component used the composable. The component
    doesn't manage the listener at all.
  - When WidthDisplay is removed (e.g. via v-if in a parent), the
    composable's onUnmounted runs and removes the resize listener
    automatically — the setup+teardown pairing lives in ONE place
    instead of being repeated in every component that needs the width.
  - Returning the `width` ref (not width.value) keeps the live
    reactive connection.
-->