Reactive breakpoint detection for responsive layouts and conditional rendering based on screen size.
Features
- Window matchMedia integration
- Six built-in breakpoints (xs, sm, md, lg, xl, xxl)
- Automatic resize listener with cleanup
- SSR-safe (checks IN_BROWSER)
- Hydration-aware
- Custom breakpoint configuration
Installation
import { createBreakpointsPlugin } from '@vuetify/v0'
const app = createApp(App)
app.use(createBreakpointsPlugin())
Basic Usage
<script setup lang="ts">
import { useBreakpoints } from '@vuetify/v0'
const breakpoints = useBreakpoints()
</script>
<template>
<div>
<p v-if="breakpoints.xs.value">Extra small screen</p>
<p v-if="breakpoints.sm.value">Small screen</p>
<p v-if="breakpoints.mdAndUp.value">Medium screen and larger</p>
<p>Current: {{ breakpoints.name.value }}</p>
<p>Width: {{ breakpoints.width.value }}px</p>
</div>
</template>
API Reference
createBreakpoints()
Creates a breakpoints instance.
Configuration optionsmobileBreakpoint
BreakpointName | number
default:"'lg'"
The breakpoint at which the layout switches to mobile
breakpoints
Partial<Record<BreakpointName, number>>
Custom breakpoint valuesDefault values:
- xs: 0
- sm: 600
- md: 840
- lg: 1145
- xl: 1545
- xxl: 2138
BreakpointsContext
BreakpointsContext
breakpoints
Readonly<Record<BreakpointName, number>>
The configured breakpoint values
name
Readonly<ShallowRef<BreakpointName>>
The current breakpoint name (xs, sm, md, lg, xl, xxl)
width
Readonly<ShallowRef<number>>
The current window width in pixels
height
Readonly<ShallowRef<number>>
The current window height in pixels
isMobile
Readonly<ShallowRef<boolean>>
Whether the current width is below the mobile breakpoint
xs
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is xs
sm
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is sm
md
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is md
lg
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is lg
xl
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is xl
xxl
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is xxl
smAndUp
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is sm or larger
mdAndUp
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is md or larger
lgAndUp
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is lg or larger
xlAndUp
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is xl or larger
xxlAndUp
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is xxl or larger
smAndDown
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is sm or smaller
mdAndDown
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is md or smaller
lgAndDown
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is lg or smaller
xlAndDown
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is xl or smaller
xxlAndDown
Readonly<ShallowRef<boolean>>
Whether the current breakpoint is xxl or smaller
Manually trigger breakpoint update
Custom Breakpoints
import { createBreakpointsPlugin } from '@vuetify/v0'
app.use(createBreakpointsPlugin({
mobileBreakpoint: 'md',
breakpoints: {
xs: 0,
sm: 480,
md: 768,
lg: 1024,
xl: 1440,
xxl: 1920,
},
}))
Conditional Rendering
<script setup lang="ts">
import { useBreakpoints } from '@vuetify/v0'
const breakpoints = useBreakpoints()
</script>
<template>
<nav>
<button v-if="breakpoints.mdAndDown.value">Menu</button>
<div v-else class="nav-links">
<a href="#">Home</a>
<a href="#">About</a>
<a href="#">Contact</a>
</div>
</nav>
</template>
