useBreakpoints

Reactive viewport detection for building responsive layouts with named breakpoints.

Installation

Install the Breakpoints plugin in your app’s entry point:

import { createApp } from 'vue'
import { createBreakpointsPlugin } from '@vuetify/v0'
import App from './App.vue'

const app = createApp(App)

app.use(
  createBreakpointsPlugin({
    mobileBreakpoint: 'sm',
    breakpoints: {
      xs: 0,
      sm: 680,
      md: 1024,
      lg: 1280,
      xl: 1920,
      xxl: 2560,
    },
  })
)

app.mount('#app')

Usage

Once the plugin is installed, use the useBreakpoints composable in any component. Destructure the properties you need for automatic ref unwrapping in templates:

<script setup lang="ts">
  import { useBreakpoints } from '@vuetify/v0'

  const { isMobile, mdAndUp, name, width, height } = useBreakpoints()

  if (isMobile.value) {
    console.log('Mobile detected')
  }
</script>

<template>
  <div>
    <!-- Destructured refs auto-unwrap in templates -->
    <nav v-if="mdAndUp">
      <!-- Desktop navigation -->
    </nav>
    <nav v-else>
      <!-- Mobile navigation -->
    </nav>

    <p v-if="isMobile">Mobile layout active</p>
    <p>Current breakpoint: {{ name }}</p>
    <p>Viewport: {{ width }} x {{ height }}</p>
  </div>
</template>

Architecture

useBreakpoints uses the plugin pattern with viewport observation:

Reactivity

All breakpoint properties are Readonly<ShallowRef> and automatically update when the viewport size changes. Use .value in script; destructure for template auto-unwrapping.

Breakpoints are range-based, not exact pixel matches. The name is the highest breakpoint whose threshold the viewport meets or exceeds. For example, at 1200px with default thresholds, name is lg because 1200 >= 1145 (the lg threshold) but 1200 < 1545 (the xl threshold). The individual flags like lg mean “the current breakpoint is lg”, while lgAndUp means “the viewport is at least lg” (i.e., lg, xl, or xxl).

Examples

SSR Support

By default, useBreakpoints returns xs / width 0 on the server. Pass ssr options to render at a known viewport size:

app.use(
  createBreakpointsPlugin({
    ssr: {
      clientWidth: 1280,
      clientHeight: 800,
    },
  })
)

On the server, all breakpoint flags are computed from the SSR dimensions — so v-if="mdAndUp" renders correctly in SSR output. On hydration, real window.innerWidth / innerHeight replace the SSR values.