vue-quick-match-media.js

/**
 * Liteweight matchMedia
 *
 * @param {String} query - The media query.
 * @param {Function} - onChange callback.
 */
const useMatchMedia = (query, onChange = matches => matches) => {
	const mm = matchMedia(query)
	// Safari still uses addListener
	mm.addListener(mql => onChange(mql.matches))

	return matchMedia(query)
}

// Usage: 
// const isDesktop = ref(false)
// const mm = useMatchMedia('screen and (min-width: 768px), matches => (isDesktop.value = matches))