1---
2category: Browser
3---
4 
5# useBreakpoints
6 
7Reactive viewport breakpoints.
8 
9## Usage
10 
11```ts
12import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
13 
14const breakpoints = useBreakpoints(breakpointsTailwind)
15 
16const smAndLarger = breakpoints.greaterOrEqual('sm') // sm and larger
17const largerThanSm = breakpoints.greater('sm') // only larger than sm
18const lgAndSmaller = breakpoints.smallerOrEqual('lg') // lg and smaller
19const smallerThanLg = breakpoints.smaller('lg') // only smaller than lg
20```
21 
22```vue
23<script setup lang="ts">
24import { useBreakpoints } from '@vueuse/core'
25 
26const breakpoints = useBreakpoints({
27  mobile: 0, // optional
28  tablet: 640,
29  laptop: 1024,
30  desktop: 1280,
31})
32 
33// Can be 'mobile' or 'tablet' or 'laptop' or 'desktop'
34const activeBreakpoint = breakpoints.active()
35 
36// true or false
37const laptop = breakpoints.between('laptop', 'desktop')
38</script>
39 
40<template>
41  <div :class="activeBreakpoint">
42    ...
43  </div>
44</template>
45```
46 
47### Shortcut Methods
48 
49You can access breakpoints directly as properties on the returned object. These return reactive refs.
50 
51```ts
52const breakpoints = useBreakpoints({
53  tablet: 640,
54  laptop: 1024,
55})
56 
57// Equivalent to breakpoints.greaterOrEqual('tablet') with min-width strategy
58const isTablet = breakpoints.tablet
59```
60 
61### Strategy
62 
63The `strategy` option controls how the shortcut properties behave:
64 
65- `min-width` (default, mobile-first): `breakpoints.lg` is `true` when viewport is `>= lg`
66- `max-width` (desktop-first): `breakpoints.lg` is `true` when viewport is `< xl`
67 
68```ts
69const breakpoints = useBreakpoints(breakpointsTailwind, {
70  strategy: 'max-width', // desktop-first
71})
72```
73 
74### Available Methods
75 
76| Method                | Description                                              |
77| --------------------- | -------------------------------------------------------- |
78| `greaterOrEqual(k)`   | Reactive: viewport width >= breakpoint                   |
79| `greater(k)`          | Reactive: viewport width > breakpoint                    |
80| `smallerOrEqual(k)`   | Reactive: viewport width <= breakpoint                   |
81| `smaller(k)`          | Reactive: viewport width < breakpoint                    |
82| `between(a, b)`       | Reactive: viewport width between a and b                 |
83| `isGreaterOrEqual(k)` | Non-reactive: returns boolean immediately                |
84| `isGreater(k)`        | Non-reactive: returns boolean immediately                |
85| `isSmallerOrEqual(k)` | Non-reactive: returns boolean immediately                |
86| `isSmaller(k)`        | Non-reactive: returns boolean immediately                |
87| `isInBetween(a, b)`   | Non-reactive: returns boolean immediately                |
88| `current()`           | Returns computed array of all matching breakpoints       |
89| `active()`            | Returns computed string of the current active breakpoint |
90 
91#### Server Side Rendering and Nuxt
92 
93If you are using `useBreakpoints` with SSR enabled, then you need to specify which screen size you would like to render on the server and before hydration to avoid an hydration mismatch
94 
95```ts
96import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
97 
98const breakpoints = useBreakpoints(breakpointsTailwind, {
99  ssrWidth: 768 // Will enable SSR mode and render like if the screen was 768px wide
100})
101```
102 
103Alternatively you can set this up globally for your app using [`provideSSRWidth`](../useSSRWidth/index.md)
104 
105## Presets
106 
107- Tailwind: `breakpointsTailwind`
108- Bootstrap v5: `breakpointsBootstrapV5`
109- Vuetify v2: `breakpointsVuetifyV2` (deprecated: `breakpointsVuetify`)
110- Vuetify v3: `breakpointsVuetifyV3`
111- Ant Design: `breakpointsAntDesign`
112- Quasar v2: `breakpointsQuasar`
113- Sematic: `breakpointsSematic`
114- Master CSS: `breakpointsMasterCss`
115- Prime Flex: `breakpointsPrimeFlex`
116- ElementUI / ElementPlus: `breakpointsElement`
117 
118_Breakpoint presets are deliberately not auto-imported, as they do not start with `use` to have the scope of VueUse. They have to be explicitly imported:_
119 
120```js
121import { breakpointsTailwind } from '@vueuse/core'
122// and so on
123```
124 
125## Type Declarations
126 
127```ts
128export * from "./breakpoints"
129export type Breakpoints<K extends string = string> = Record<
130  K,
131  MaybeRefOrGetter<number | string>
132>
133export interface UseBreakpointsOptions extends ConfigurableWindow {
134  /**
135   * The query strategy to use for the generated shortcut methods like `.lg`
136   *
137   * 'min-width' - .lg will be true when the viewport is greater than or equal to the lg breakpoint (mobile-first)
138   * 'max-width' - .lg will be true when the viewport is smaller than the xl breakpoint (desktop-first)
139   *
140   * @default "min-width"
141   */
142  strategy?: "min-width" | "max-width"
143  ssrWidth?: number
144}
145export type UseBreakpointReturn<K extends string = string> = Record<
146  K,
147  ComputedRef<boolean>
148> & {
149  greaterOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
150  smallerOrEqual: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
151  greater: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
152  smaller: (k: MaybeRefOrGetter<K>) => ComputedRef<boolean>
153  between: (
154    a: MaybeRefOrGetter<K>,
155    b: MaybeRefOrGetter<K>,
156  ) => ComputedRef<boolean>
157  isGreater: (k: MaybeRefOrGetter<K>) => boolean
158  isGreaterOrEqual: (k: MaybeRefOrGetter<K>) => boolean
159  isSmaller: (k: MaybeRefOrGetter<K>) => boolean
160  isSmallerOrEqual: (k: MaybeRefOrGetter<K>) => boolean
161  isInBetween: (a: MaybeRefOrGetter<K>, b: MaybeRefOrGetter<K>) => boolean
162  current: () => ComputedRef<K[]>
163  active: () => ComputedRef<K | "">
164}
165/**
166 * Reactively viewport breakpoints
167 *
168 * @see https://vueuse.org/useBreakpoints
169 *
170 * @__NO_SIDE_EFFECTS__
171 */
172export declare function useBreakpoints<K extends string>(
173  breakpoints: Breakpoints<K>,
174  options?: UseBreakpointsOptions,
175): UseBreakpointReturn<K>
176```
177