useBreakpoints

The useBreakpoints composable provides comprehensive responsive design capabilities through reactive viewport dimension detection. It automatically tracks window size changes and provides boolean flags for current breakpoint ranges, enabling mobile-first and responsive layouts.

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.

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.