vue-b-media-breakpoint

vue-b-media-breakpoint

vue-b-media-breakpoint is like bootstrap 4 responsive breakpoints that js tool

Install

npm install --save vue-b-media-breakpoint

import Vue from 'vue';
import vueBMediaBreakpoint from 'vue-b-media-breakpoint';

Vue.use(vueBMediaBreakpoint);

Usage

using $mediaBreakpoint or $Bmb to get responsive breakpoints of status with type of boolean
$mediaBreakpoint has properties that [down, only, up] type
up includes [sm, md, lg, xl] size
only includes [xs, sm, md, lg, xl] size
down includes [xs, sm, md, lg] size
$Bmb.[type].[size]
$Bmb.between is a function that just like media-breakpoint-between sass mixin

    <div v-if="$mediaBreakpoint.up.sm">
      media-breakpoint-up(sm) = (min-width: 576px)
    </div>

    <div v-if="$Bmb.up.md">
      media-breakpoint-up(md) = (min-width: 768px)
    </div>

    <div v-if="$Bmb.up.lg">
      media-breakpoint-up(lg) = (min-width: 992px)
    </div>

    <div v-if="$Bmb.up.xl">
      media-breakpoint-up(xl) = (min-width: 1200px)
    </div>


    <div v-if="$mediaBreakpoint.only.xs">
      media-breakpoint-only(xs) = (max-width: 575.98px)
    </div>

    <div v-if="$Bmb.only.sm">
      media-breakpoint-only(sm) = (min-width: 576px) and (max-width: 767.98px)
    </div>

    <div v-if="$Bmb.only.md">
      media-breakpoint-only(md) = (min-width: 768px) and (max-width: 991.98px)
    </div>

    <div v-if="$Bmb.only.lg">
      media-breakpoint-only(lg) = (min-width: 992px) and (max-width: 1199.98px)
    </div>

    <div v-if="$Bmb.only.xl">
      media-breakpoint-only(xl) = (min-width: 1200px)
    </div>


    <div v-if="$mediaBreakpoint.down.xs">
      media-breakpoint-down(xs) = (max-width: 575.98px)
    </div>

    <div v-if="$Bmb.down.sm">
      media-breakpoint-down(sm) = (max-width: 767.98px)
    </div>

    <div v-if="$Bmb.down.md">
      media-breakpoint-down(md) = (max-width: 991.98px)
    </div>

    <div v-if="$Bmb.down.lg">
      media-breakpoint-down(lg) = (max-width: 1199.98px)
    </div>


    <div v-if="$Bmb.between('md', 'xl')">
      media-breakpoint-up(md) = (min-width: 768px)
      and
      ...xl
    </div>

set watching

    watch     : {
      $Bmb: {
        handler (_$Bmb) {
          // do something when every changed
        },
        deep: true
      }
    }

every breakpoint refer Bootstrap Layout