@propero/vue-breakpoints

Provide breakpoints for responsive webdesign

npm install @propero/vue-breakpoints

Usage

Consuming the Plugin

import Vue from "vue";
import {VueBreakpoints} from "@propero/vue-breakpoints";

Vue.use(VueBreakpoints, {
  // If you want 'breakpoint--SIZE', e.g. 'breakpoint--s' or 'breakpoint--above-m'
  // classes to be automatically added to the body tag
  // optional, default false
  addCssClasses: true,
  // What breakpoints you want and at what thresholds they should start
  // optional, default 'xs480 s736 m980 l1280 xl1690'
  breakpoints: "s480 m760 l1280"
});
// Or just
Vue.use(VueBreakpoints);

Using the Plugin

The plugin defines a Breakpoints object at the $break property of all vue components. You can use them, e.g. in templates using v-if.

<template>
  <desktop-header v-if="$break.above('m')" />
  <mobile-header v-else />
</template>

If you enable css classes, you can use them in your stylesheets also.

.burger-menu {
  display: none
}
.breakpoint--below-m .burger-menu {
  display: block;
}
.breakpoint--s .brand-icon {
  height: 48px
}

The defined classes are names breakpoint--below-SIZE, breakpoint--above-SIZE and breakpoint--SIZE where SIZE is a placeholder for the name of the breakpoint given.

The Plugin exports several utility functions and properties:

| Member Name | Description | Example Use | |-------------------------|-----------------------------------------------------------------------------------------------------------------------------------|------------------------------------| | current | A key-value pair with the current breakpoint name and it's corresponding width | $break.current[0] === "s" | | currentPoint | The current breakpoint name | $break.currentPoint === "s" | | currentSize | The current breakpoint's width | $break.currentSize > 640 | | above(size) | Returns true if the current screen size is above the threshold for the breakpoint given | $break.above('m') | | below(size) | Returns true if the current screen size is below the threshold for the breakpoint given | $break.below('m') | | aboveOr(size) | Returns true if the current screen size is above or at the threshold for the breakpoint given | $break.aboveOr('m') | | belowOr(size) | Returns true if the current screen size is below or at the threshold for the breakpoint given | $break.belowOr('m') | | between(lower, upper) | Returns true if the current screen size is at or over the lower threshold and below the upper threshold for the breakpoints given | $break.between('m', 'l') | | outside(lower, upper) | Returns true if the current screen size is below the lower threshold and above the upper threshold for the breakpoints given | $break.outside('m', 'l') |