MediaQuery Change Composition Hook

import { onMounted, onUnmounted } from "vue";

export const useMediaQueryListener = (
  mediaQuery: string,
  callback: (matches: boolean) => void
) => {
  function handleMediaQueryListChange(e: MediaQueryListEvent) {
    callback(e.matches);
  }

  let mediaQueryList: MediaQueryList;

  onMounted(() => {
    mediaQueryList = window.matchMedia(mediaQuery);
    callback(mediaQueryList.matches);
    mediaQueryList.addEventListener("change", handleMediaQueryListChange);
  });

  onUnmounted(() => {
    mediaQueryList?.removeEventListener("change", handleMediaQueryListChange);
  });
};

Usage

<script setup lang="ts">
import { useMediaQueryListener } from "..";

useMediaQueryListener("(min-width: 1024px)", (matches) => {
  // Do stuff when matches is true
});
</script>