maz-ui/dist/composables/useBreakpoints.js

A standalone components library for Vue.Js 3 & Nuxt.Js 3

import { computed } from "vue";
import { getNumericScreensFromTailwind } from "../tailwindcss/variables/breakpoints.js";
import { useWindowSize } from "./useWindowSize.js";
function useBreakpoints({
  initialWidth = 0,
  initialHeight,
  includeScrollbar,
  internalWindow,
  listenOrientation,
  breakpoints,
  mediumBreakPoint = "md",
  largeBreakPoint = "lg"
}) {
  const { width } = useWindowSize({
    initialWidth,
    // (SSR) mobile first
    initialHeight,
    includeScrollbar,
    internalWindow
  }), numericBreakpoints = getNumericScreensFromTailwind(breakpoints), isLargeScreen = computed(() => width.value >= numericBreakpoints[largeBreakPoint]), isMediumScreen = computed(
    () => width.value >= numericBreakpoints[mediumBreakPoint] && width.value < numericBreakpoints[largeBreakPoint]
  ), isSmallScreen = computed(() => width.value >= 0 && width.value < numericBreakpoints[mediumBreakPoint]);
  return {
    width,
    numericBreakpoints,
    isSmallScreen,
    isLargeScreen,
    isMediumScreen,
    breakpoints
  };
}
export {
  useBreakpoints
};