maz-ui/dist/composables/useBreakpoints.js

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

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