@frankhoodbs/breakpoints

Vue Breakpoints Utility

A Vue 3 utility that offers a streamlined interface for working with CSS breakpoints, leveraging CSS custom properties (or CSS variables) defined within the :root selector. This utility taps into the css-custom-properties-list dependency to extract the custom properties and provides handy methods to manage media queries within Vue.

Key Features

• Automatic Breakpoint Extraction: Identifies and handles breakpoints straight from CSS custom properties.
• Vue Integration: Harnesses Vue's reactivity to provide real-time information about the current breakpoints and media query utilities.
• Prefix Support: Supports custom prefixes for breakpoint variable names.

Usage

To get started, first import and initialize the Breakpoints class:

import { Breakpoints } from '@your-package/vue-breakpoints-utility';

const breakpointsUtility = new Breakpoints(document.documentElement, document.styleSheets);

Accessing the Current Breakpoint

You can easily get the current active breakpoint:

console.log(breakpointsUtility.currentBreakpoint.value); // e.g. 'md'

Utility Methods for Media Queries

The utility offers a range of methods designed to facilitate media query management. Here are some of the most common uses:

• And Up - Returns true if the viewport width is at or above the specified breakpoint:

if (breakpointsUtility.utilityMethods.mdAndUp.value) {
  // Code for medium devices and above
}

• And Down - Returns true if the viewport width is at or below the specified breakpoint:

if (breakpointsUtility.utilityMethods.lgAndDown.value) {
  // Code for large devices and below
}

• Only - Returns true only for the specific breakpoint:

if (breakpointsUtility.utilityMethods.lgOnly.value) {
  // Code exclusive to large devices
}

These utilities harness Vue's reactivity, ensuring your UI or logic adapts in real-time to viewport changes. This should give a comprehensive guide on the utility's usage, including the main methods that were mentioned in the code.

Dependencies

• @vueuse/core: Used for harnessing the reactivity of Vue 3.
• @frankhoodbs/css-custom-properties-list: Employed to extract CSS custom properties.