Skip to content

useBreakpoints ​

Category
Export Size
915 B
Last Changed
last month

Reactive viewport breakpoints.

Demo ​

Current breakpoints: []
Active breakpoint:
xs(<640px): false
xs(<=640px): false
sm: false
md: false
lg: false
xl: false
2xl: false
greaterThanBreakPoint: false

Usage ​

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

const breakpoints = useBreakpoints(breakpointsTailwind)

const smAndLarger = breakpoints.greaterOrEqual('sm') // sm and larger
const largerThanSm = breakpoints.greater('sm') // only larger than sm
const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg
vue
<script setup lang="ts">
import { useBreakpoints } from '@vueuse/core'

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

// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
const activeBreakpoint = breakpoints.active()

// true or false
const laptop = breakpoints.between('laptop', 'desktop')
</script>

<template>
  <div :class="activeBreakpoint">
    ...
  </div>
</template>

Type Declarations ​

Show Type Declarations
typescript
export * from "./breakpoints"
export type Breakpoints<K extends string = string> = Record<
  K,
  MaybeRefOrGetter<number | string>
>
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"
}
/**
 * Reactively viewport breakpoints
 *
 * @see https://vueuse.org/useBreakpoints
 */
export declare function useBreakpoints<K extends string>(
  breakpoints: Breakpoints<K>,
  options?: UseBreakpointsOptions,
): Record<K, Ref<boolean>> & {
  greaterOrEqual: (k: MaybeRefOrGetter<K>) => Ref<boolean>
  smallerOrEqual: (k: MaybeRefOrGetter<K>) => Ref<boolean>
  greater(k: MaybeRefOrGetter<K>): Ref<boolean>
  smaller(k: MaybeRefOrGetter<K>): Ref<boolean>
  between(a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>): Ref<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<string[]>
  active(): ComputedRef<string | undefined>
}
export type UseBreakpointsReturn<K extends string = string> = {
  greater: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  greaterOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  smaller: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
  smallerOrEqual: (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<string[]>
  active: ComputedRef<string>
} & Record<K, ComputedRef<boolean>>

Source ​

Source • Demo • Docs

Contributors ​

Anthony Fu
Doctor Wu
Ruslan Makarov
jack-allocate
Ed
Adrian Rudnik
Inesh Bose
Imam Susanto
azaleta
webfansplz
Ege Ä°liklier
Shinigami
Alex Kozack
taidaid
wheat
Azri Kahar

Changelog ​

v10.8.0 on 2/20/2024
3ae45 - feat: add active getter, add breakpoints for Vuetify v3 (#3687)
15fc0 - feat: add strategy option to allow desktop-first convention (#3783)
d3317 - feat: enable passing ref or getter to get breakpoints (#3621)
a086e - fix: stricter types
v10.7.0 on 12/5/2023
dc624 - feat: make parameters reactivity (#3592)
v10.5.0 on 10/7/2023
ec9a4 - fix: add missing breakpoint for the bootstrap (#3413)
v10.4.0 on 8/25/2023
8b5ed - feat: add breakpoints for PrimeFlex (#3317)
v10.0.0-beta.3 on 4/12/2023
e75a5 - feat: update deps
v10.0.0-beta.2 on 3/28/2023
bbabd - feat: getting current breakpoints (#2906)
v9.7.0 on 12/16/2022
30c5b - feat: add breakpoints for Master CSS (#2529)
v9.2.0 on 9/5/2022
48bf3 - feat: support greaterOrEqual etc. (#2148)

Released under the MIT License.