I made a nice utility to easily bind a media-query to a reactive vue reference:
Note
A screenshot of dark-themed code. Reading:
export function useOrientation() { const query = window.matchMedia("(orientation: landscape)");
// Reactive data to store the orientation in const orientation = ref<"portrait" | "landscape">( query.matches ? "landscape" : "portrait", );
// A callback to update the orientation when it changes function onChange(event: MediaQueryListEvent) { orientation.value = event.matches ? "landscape" : "portrait"; }
// Add/remove the callback when the component is mounted onMounted(() => query.addEventListener("change", onChange)); onUnmounted(() => query.removeEventListener("change", onChange));
return orientation; }