⬅️ Back to Table of Contents

📄 useBreakpoints

📊 Analysis Summary

Metric	Count
🔧 Functions	6
📦 Imports	12
🔄 Re-exports	1
🟢 Vue Composition API	2
📐 Interfaces	1
📑 Type Aliases	2

📚 Table of Contents

• Imports
• Re-exports
• Vue Composition API
• Functions
• Interfaces
• Type Aliases

🛠️ File Location:

📂 packages/core/useBreakpoints/index.ts

📦 Imports

Name	Source
ComputedRef	vue
MaybeRefOrGetter	vue
ConfigurableWindow	../_configurable
increaseWithUnit	@vueuse/shared
pxValue	@vueuse/shared
tryOnMounted	@vueuse/shared
computed	vue
shallowRef	vue
toValue	vue
defaultWindow	../_configurable
useMediaQuery	../useMediaQuery
useSSRWidth	../useSSRWidth

---

Re-exports

Type	Source	Exported Names
namespace	./breakpoints	*

---

Vue Composition API

Name	Type	Reactive Variables	Composables
computed	computed	none	none
computed	computed	none	none

---

Functions

useBreakpoints(breakpoints: Breakpoints<K>, options: UseBreakpointsOptions): UseBreakpointReturn<K>

Reactively viewport breakpoints

See: https://vueuse.org/useBreakpoints

Tags: @__NO_SIDE_EFFECTS__

Raw JSDoc

/**
 * Reactively viewport breakpoints
 *
 * @see https://vueuse.org/useBreakpoints
 *
 * @__NO_SIDE_EFFECTS__
 */

Calls:

• toValue (from vue)
• increaseWithUnit (from @vueuse/shared)
• useSSRWidth (from ../useSSRWidth)
• shallowRef (from vue)
• tryOnMounted (from @vueuse/shared)
• pxValue (from @vueuse/shared)
• window.matchMedia
• useMediaQuery (from ../useMediaQuery)
• getValue
• (Object.keys(breakpoints) as K[]) .reduce
• Object.keys
• Object.defineProperty
• greaterOrEqual
• smallerOrEqual
• (Object.keys(breakpoints) as K[]) .map(k => [k, shortcutMethods[k], pxValue(getValue(k))] as const) .sort
• computed (from vue)
• points.filter(([, v]) => v.value).map
• Object.assign
• match
• current
• bps.value.at

Code

export function useBreakpoints<K extends string>(
  breakpoints: Breakpoints<K>,
  options: UseBreakpointsOptions = {},
): UseBreakpointReturn<K> {
  function getValue(k: MaybeRefOrGetter<K>, delta?: number) {
    let v = toValue(breakpoints[toValue(k)])

    if (delta != null)
      v = increaseWithUnit(v, delta)

    if (typeof v === 'number')
      v = `${v}px`

    return v
  }

  const { window = defaultWindow, strategy = 'min-width', ssrWidth = useSSRWidth() } = options

  const ssrSupport = typeof ssrWidth === 'number'
  const mounted = ssrSupport ? shallowRef(false) : { value: true }
  if (ssrSupport) {
    tryOnMounted(() => mounted.value = !!window)
  }

  function match(query: 'min' | 'max', size: string): boolean {
    if (!mounted.value && ssrSupport) {
      return query === 'min' ? ssrWidth >= pxValue(size) : ssrWidth <= pxValue(size)
    }
    if (!window)
      return false
    return window.matchMedia(`(${query}-width: ${size})`).matches
  }

  const greaterOrEqual = (k: MaybeRefOrGetter<K>) => {
    return useMediaQuery(() => `(min-width: ${getValue(k)})`, options)
  }

  const smallerOrEqual = (k: MaybeRefOrGetter<K>) => {
    return useMediaQuery(() => `(max-width: ${getValue(k)})`, options)
  }

  const shortcutMethods = (Object.keys(breakpoints) as K[])
    .reduce((shortcuts, k) => {
      Object.defineProperty(shortcuts, k, {
        get: () => strategy === 'min-width'
          ? greaterOrEqual(k)
          : smallerOrEqual(k),
        enumerable: true,
        configurable: true,
      })
      return shortcuts
    }, {} as Record<K, ReturnType<typeof greaterOrEqual>>)

  function current() {
    const points = (Object.keys(breakpoints) as K[])
      .map(k => [k, shortcutMethods[k], pxValue(getValue(k))] as const)
      .sort((a, b) => a[2] - b[2])
    return computed(() => points.filter(([, v]) => v.value).map(([k]) => k))
  }

  return Object.assign(shortcutMethods, {
    greaterOrEqual,
    smallerOrEqual,
    greater(k: MaybeRefOrGetter<K>) {
      return useMediaQuery(() => `(min-width: ${getValue(k, 0.1)})`, options)
    },
    smaller(k: MaybeRefOrGetter<K>) {
      return useMediaQuery(() => `(max-width: ${getValue(k, -0.1)})`, options)
    },
    between(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) {
      return useMediaQuery(() => `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`, options)
    },
    isGreater(k: MaybeRefOrGetter<K>) {
      return match('min', getValue(k, 0.1))
    },
    isGreaterOrEqual(k: MaybeRefOrGetter<K>) {
      return match('min', getValue(k))
    },
    isSmaller(k: MaybeRefOrGetter<K>) {
      return match('max', getValue(k, -0.1))
    },
    isSmallerOrEqual(k: MaybeRefOrGetter<K>) {
      return match('max', getValue(k))
    },
    isInBetween(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) {
      return match('min', getValue(a)) && match('max', getValue(b, -0.1))
    },
    current,
    active() {
      const bps = current()
      return computed(() => bps.value.length === 0 ? '' : bps.value.at(strategy === 'min-width' ? -1 : 0)!)
    },
  })
}

Internal helpers

Declared inside another function in this file.

getValue(k: MaybeRefOrGetter<K>, delta: number): any

Parameters:

• k MaybeRefOrGetter<K>
• delta number

Returns: any

Calls:

• toValue (from vue)
• increaseWithUnit (from @vueuse/shared)

Code

function getValue(k: MaybeRefOrGetter<K>, delta?: number) {
    let v = toValue(breakpoints[toValue(k)])

    if (delta != null)
      v = increaseWithUnit(v, delta)

    if (typeof v === 'number')
      v = `${v}px`

    return v
  }

match(query: 'min' | 'max', size: string): boolean

Parameters:

• query 'min' | 'max'
• size string

Returns: boolean

Calls:

• pxValue (from @vueuse/shared)
• window.matchMedia

Code

function match(query: 'min' | 'max', size: string): boolean {
    if (!mounted.value && ssrSupport) {
      return query === 'min' ? ssrWidth >= pxValue(size) : ssrWidth <= pxValue(size)
    }
    if (!window)
      return false
    return window.matchMedia(`(${query}-width: ${size})`).matches
  }

greaterOrEqual(k: MaybeRefOrGetter<K>): any

Parameters:

• k MaybeRefOrGetter<K>

Returns: any

Calls:

• useMediaQuery (from ../useMediaQuery)
• getValue

Code

(k: MaybeRefOrGetter<K>) => {
    return useMediaQuery(() => `(min-width: ${getValue(k)})`, options)
  }

smallerOrEqual(k: MaybeRefOrGetter<K>): any

Parameters:

• k MaybeRefOrGetter<K>

Returns: any

Calls:

• useMediaQuery (from ../useMediaQuery)
• getValue

Code

(k: MaybeRefOrGetter<K>) => {
    return useMediaQuery(() => `(max-width: ${getValue(k)})`, options)
  }

current(): any

Returns: any

Calls:

• (Object.keys(breakpoints) as K[]) .map(k => [k, shortcutMethods[k], pxValue(getValue(k))] as const) .sort
• computed (from vue)
• points.filter(([, v]) => v.value).map

Code

function current() {
    const points = (Object.keys(breakpoints) as K[])
      .map(k => [k, shortcutMethods[k], pxValue(getValue(k))] as const)
      .sort((a, b) => a[2] - b[2])
    return computed(() => points.filter(([, v]) => v.value).map(([k]) => k))
  }

---

Interfaces

UseBreakpointsOptions

Interface Code

export interface UseBreakpointsOptions extends ConfigurableWindow {
  /**
   * The query strategy to use for the generated shortcut methods like `.lg`
   *
   * 'min-width' - .lg will be true when the viewport is greater than or equal to the lg breakpoint (mobile-first)
   * 'max-width' - .lg will be true when the viewport is smaller than the xl breakpoint (desktop-first)
   *
   * @default "min-width"
   */
  strategy?: 'min-width' | 'max-width'
  ssrWidth?: number
}

Properties

Name	Type	Optional	Description
strategy	'min-width' \| 'max-width'	✓	not shown
ssrWidth	number	✓	not shown

---

Type Aliases

Breakpoints<K extends string = string>

type Breakpoints<K extends string = string> = Record<K, MaybeRefOrGetter<number | string>>;

UseBreakpointReturn<K extends string = string>

type UseBreakpointReturn<K extends string = string> = Record<K, ComputedRef<boolean>> & {
  greaterOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  smallerOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  greater: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  smaller: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  between: (a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  isGreater: (k: MaybeRefOrGetter<K>) => boolean
  isGreaterOrEqual: (k: MaybeRefOrGetter<K>) => boolean
  isSmaller: (k: MaybeRefOrGetter<K>) => boolean
  isSmallerOrEqual: (k: MaybeRefOrGetter<K>) => boolean
  isInBetween: (a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) => boolean
  current: () => ComputedRef<K[]>
  active: () => ComputedRef<K | ''>
};

---

Generated by Syntax Scribe