Preparing for system design interviews?  Try bugzed.com →

Vue Screen Utilities

JSON →
library 1.0.0-beta.13 ·javascript
verified Jun 17, 2026

vue-screen-utils is a dependency-free Vue 3 library providing a suite of reactive utility functions for managing screen breakpoints, media queries, DOM element resize observations, and dark mode detection. Currently in version `1.0.0-beta.13`, it is in active development with a stable `1.0.0` release anticipated soon, implying a potentially frequent update cadence until then. The library is fully written in TypeScript, offering robust type safety and excellent IDE support. It distinguishes itself by allowing developers to define custom, semantically named screen size keys (e.g., `sm`, `md`, `lg`) and map them to various media query formats, which are then reactively evaluated against the current viewport. It offers both composable functions like `useScreens`, `useMediaQuery`, `useResizeObserver`, and `useDarkMode`, as well as a plugin for application-wide integration. Key features include a reactive `matches` object indicating active breakpoints, a `current` computed property for the largest active screen key, and utility functions like `mapCurrent` and `mapList` for mapping custom values to the current screen state.

total hits 9
actors 3 distinct systems
last hit 18d ago AhrefsBot
GPTBot
4
Script
1

top countries 🇺🇸 United States · 🇬🇧 United Kingdom · 🇨🇦 Canada · 🇩🇪 Germany