# vue-b-media-breakpoint

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

Latest version **1.3.9** (published 2018-12-06) · ISC license · 0 weekly downloads

## Install

```sh
npm install vue-b-media-breakpoint
pnpm add vue-b-media-breakpoint
yarn add vue-b-media-breakpoint
bun add vue-b-media-breakpoint
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.3.9 |
| Published | 2018-12-06 |
| First published | 2018-11-24 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 10 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | coreyhao |
| Maintainers | coreyhao0313 |

## Links

- npm: https://www.npmjs.com/package/vue-b-media-breakpoint
- npm.io page: https://npm.io/package/vue-b-media-breakpoint

## Dependencies (1)

- [media-queries](https://npm.io/package/media-queries.md) https://github.com/clossweb/media-queries/archive/master.tar.gz

## Recent versions

- 1.3.9 (latest) — 2018-12-06
- 1.2.9 — 2018-12-02
- 1.2.8 — 2018-11-30
- 1.2.6 — 2018-11-30
- 1.1.6 — 2018-11-25
- 1.0.6 — 2018-11-25
- 1.0.0 — 2018-11-24

## README

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

<h3>Install</h3>

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

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

Vue.use(vueBMediaBreakpoint);
```

<h3>Usage</h3>

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

    <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
```js
    watch     : {
      $Bmb: {
        handler (_$Bmb) {
          // do something when every changed
        },
        deep: true
      }
    }
```

every breakpoint refer [Bootstrap Layout](https://getbootstrap.com/docs/4.0/layout/overview/)

---
_Source: https://npm.io/package/vue-b-media-breakpoint · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._