Nuxt Breakpoints

nuxt-breakpoints is a Nuxt.js 2 module that uses the Resize Observer API to expose viewport breakpoints as computed properties on the Vue instance, making it possible to read the current breakpoint in JavaScript. This repository is explicitly deprecated by its creator Steven Ho, who recommends modern alternatives such as VueUse's useBreakpoints for Vue 3 projects.

What is nuxt-breakpoints?

nuxt-breakpoints is a client-side Nuxt.js module that adds a special $breakpoints object to your Vue components. You configure breakpoint names and pixel widths in nuxt.config.js, and the module tracks the browser window size through ResizeObserver, updating the reactive breakpoint flags automatically as the viewport changes. The module outputs boolean properties for each configured breakpoint plus convenience prefixes for "larger than" and "smaller than" comparisons, for example lSm means "equal to or larger than sm" and sMd means "equal to or smaller than md".

Key Features

• Reactive breakpoint flags — The $breakpoints object exposes booleans like md or lg that update in real time when the browser is resized.
• Large/small helpers — Use lSm, lMd, lLg and sSm, sMd, sLg to test whether the viewport is larger or smaller than a given breakpoint, inclusive of that breakpoint.
• Configurable breakpoints — Defaults are sm 576, md 768, lg 992, xl 1200, but you can override each numeric pixel value in the module options.
• ResizeObserver polyfill — The polyfill option defaults to true, so resize-observer-polyfill is auto-imported when the browser does not support ResizeObserver.
• Throttled resize events — The throttle option defaults to 200 milliseconds, slowing down the trigger frequency while the window is resizing.
• Nuxt modules integration — Install via npm or yarn and add 'nuxt-breakpoints' to the modules array in nuxt.config.js; module options can be passed directly or through a breakpoints key.

Who is it for?

nuxt-breakpoints targets Nuxt.js 2 developers who need to react to breakpoint changes inside JavaScript logic, not just in CSS media queries. It is useful for conditionally rendering components, adjusting chart dimensions, or switching layout behavior based on the active viewport in a server-side-rendered Nuxt app. Because it is a module rather than a plugin, developers can configure it globally and access it from any component without repeating setup.

What can you do with nuxt-breakpoints?

• Conditional component rendering — Show or hide components based on the current breakpoint, such as displaying a mobile navigation only when $breakpoints.lg is false.
• Dynamic chart or canvas sizing — Read the current breakpoint in JavaScript to set the width or height of a chart, canvas, or other element that cannot rely on CSS alone.
• Viewport comparisons — Use the larger-than and smaller-than helpers to implement "show this panel when the viewport is at least large" or "compact this table when below medium" logic without manually combining multiple flags.

How does nuxt-breakpoints work?

Installation happens in two steps: add the dependency, then register 'nuxt-breakpoints' in the modules array of nuxt.config.js. The module reads your breakpoint configuration, attaches a ResizeObserver to the window, and sets the $breakpoints reactive properties on the Nuxt context and Vue instance. When the viewport crosses a breakpoint threshold, the module updates the relevant boolean flags immediately.

Alternatives

Because this project is deprecated, the author points to VueUse's useBreakpoints as a better alternative for Vue 3 users. On a broader level, the native MediaQueryList API and the Resize Observer API itself provide lower-level ways to achieve similar responsive behavior without a dedicated module.

FAQ

Is nuxt-breakpoints free to use?

Yes, this module is released under the MIT License.

Is nuxt-breakpoints still maintained?

No. The repository is explicitly marked as deprecated. The author decided to stop maintaining it and recommends using VueUse's useBreakpoints or the native MediaQueryList API instead.

What are the default breakpoints?

The default breakpoints are sm 576, md 768, lg 992, and xl 1200 pixels. The xs breakpoint covers everything below sm.

Does nuxt-breakpoints work with Nuxt 3?

No. This module was built for Nuxt 2. For Nuxt 3, the author recommends VueUse's useBreakpoints which works with the composition API.

What is the lSm or sMd syntax?

The l prefix means "larger than" and s means "smaller than", both including the breakpoint itself. So lSm is true when the viewport is equal to or larger than sm, and sMd is true when the viewport is equal to or smaller than md.