Skip to main content
Vuetify0 is now in alpha!
Vuetify0 Logo
Theme
Mode
Palettes
Accessibility
Vuetify One
Sign in to Vuetify One

Access premium tools across the Vuetify ecosystem — Bin, Play, Studio, and more.

Not a subscriber? See what's included

useBreakpoints API

API reference for the useBreakpoints composable.

Explore these related pages for additional context and usage patterns.

PageCategory
useBreakpointsPlugins
useMediaQuerySystem
PluginsFundamentals

Functions

createBreakpoints

(_options?: BreakpointsOptions) => BreakpointsContext

Creates a new breakpoints instance.

createBreakpointsContext

<_E>(_options?: BreakpointsContextOptions | undefined) => ContextTrinity<_E>

createBreakpointsPlugin

(_options?: BreakpointsContextOptions | undefined) => Plugin

useBreakpoints

<_E>(namespace?: string) => _E

Options

namespace

string | undefined

mobileBreakpoint

number | BreakpointName | undefined

breakpoints

Partial<Record<BreakpointName, number>> | undefined

ssr

{ clientWidth: number; clientHeight?: number; } | undefined

Properties

breakpoints

Readonly<Record<BreakpointName, number>>

mobileBreakpoint

number | BreakpointName

name

Readonly<ShallowRef<BreakpointName>>

width

Readonly<ShallowRef<number>>

height

Readonly<ShallowRef<number>>

isMobile

Readonly<ShallowRef<boolean>>

xs

Readonly<ShallowRef<boolean>>

sm

Readonly<ShallowRef<boolean>>

md

Readonly<ShallowRef<boolean>>

lg

Readonly<ShallowRef<boolean>>

xl

Readonly<ShallowRef<boolean>>

xxl

Readonly<ShallowRef<boolean>>

smAndUp

Readonly<ShallowRef<boolean>>

mdAndUp

Readonly<ShallowRef<boolean>>

lgAndUp

Readonly<ShallowRef<boolean>>

xlAndUp

Readonly<ShallowRef<boolean>>

smAndDown

Readonly<ShallowRef<boolean>>

mdAndDown

Readonly<ShallowRef<boolean>>

lgAndDown

Readonly<ShallowRef<boolean>>

xlAndDown

Readonly<ShallowRef<boolean>>

ssr

boolean

Methods

update

() => void
Was this page helpful?

Ctrl+/