VueUse
sm: false
md: false
lg: false
xl: false
2xl: false
3xl: false

useBreakpoints

Reactive viewport breakpoints

Usage

import { useBreakpoints, breakpointsTailwind } from '@vueuse/core'

const breakpoints = useBreakpoints(breakpointsTailwind)

const smAndLarger = breakpoints.greater('sm')

import { useBreakpoints } from '@vueuse/core'

const breakpoints = useBreakpoints({
  tablet: 640,
  laptop: 1024,
  desktop: 1280,
})

const laptop = breakpoints.between('laptop', 'desktop')

Type Declarations

export * from "./breakpoints"
export declare type Breakpoints<K extends string = string> = Record<
  K,
  number | string
>
/**
 * Reactively viewport breakpoints
 *
 * @see /useBreakpoints
 * @param options
 */
export declare function useBreakpoints<K extends string>(
  breakpoints: Breakpoints<K>,
  options?: ConfigurableWindow
): {
  greater(k: K): Ref<boolean>
  smaller(k: K): Ref<boolean>
  between(a: K, b: K): Ref<boolean>
  isGreater(k: K): boolean
  isSmaller(k: K): boolean
  isInBetween(a: K, b: K): boolean
}

Source

Source • Demo • Docs