useMediaQuery Composable

import { ref, onMounted, onUnmounted } from 'vue';

export function useMediaQuery(query: string) {
  const matches = ref(false);
  let mediaQueryList: MediaQueryList | null = null;

  const updateMatches = () => {
    __TOKEN_14__ (mediaQueryList) {
      matches.value = mediaQueryList.matches;
    }
  };

  onMounted(() => {
    mediaQueryList = window.matchMedia(query);
    matches.value = mediaQueryList.matches;
    mediaQueryList.addEventListener('change', updateMatches);
  });

  onUnmounted(() => {
    __TOKEN_15__ (mediaQueryList) {
      mediaQueryList.removeEventListener('change', updateMatches);
    }
  });

  return matches;
}

// Usage example
// const isSmallScreen = useMediaQuery('(max-width: 768px)');
// const isRetina = useMediaQuery('(min-resolution: 2dppx)');
// watch(isSmallScreen, (val) => console.log('Small screen:', val));