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

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

!Version
!License

Usage

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

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

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

$3

You can easily get the current active breakpoint:

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

$3

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

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

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

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

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

3. Only - Returns true only for the specific breakpoint:

`javascript
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.