# vue-md-breakpoint

> Material Design breakpoints for Vue

Latest version **1.0.0** (published 2018-04-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-md-breakpoint
pnpm add vue-md-breakpoint
yarn add vue-md-breakpoint
bun add vue-md-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.0.0 |
| Published | 2018-04-04 |
| First published | 2018-04-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.3 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Christoph Buelter |
| Maintainers | cb109 |
| Keywords | vue, material, design, breakpoint, responsive, app |

## Links

- npm: https://www.npmjs.com/package/vue-md-breakpoint
- Repository: https://github.com/cb109/vue-md-breakpoint
- Homepage: https://github.com/cb109/vue-md-breakpoint#readme
- Issues: https://github.com/cb109/vue-md-breakpoint/issues
- npm.io page: https://npm.io/package/vue-md-breakpoint

## Dependencies (1)

- [vue-template-compiler](https://npm.io/package/vue-template-compiler.md) ^2.5.16

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@progress/kendo-vue-listbox](https://npm.io/package/@progress/kendo-vue-listbox.md) — 932 weekly downloads

## Recent versions

- 1.0.0 (latest) — 2018-04-04

## README

# vue-md-breakpoint

Access the current breakpoint from the material design spec inside a Vue app.
Resizing the browser will update the breakpoint accordingly.

## Installation

    npm install vue-md-breakpoint
    # or:
    yarn add vue-md-breakpoint

## Usage

You can use it as a mixin for your app.

    import Vue from 'vue';
    import breakpoint from 'vue-md-breakpoint';

    // in your app/component:

    mixins: [breakpoint],

    // and in your templates:

    <div v-if="$breakpoint.smAndUp"></div>

## API

- `$breakpoint.name`
- `$breakpoint.xsOnly`
- `$breakpoint.smOnly`
- `$breakpoint.smAndDown`
- `$breakpoint.smAndUp`
- `$breakpoint.mdOnly`
- `$breakpoint.mdAndDown`
- `$breakpoint.mdAndUp`
- `$breakpoint.lgOnly`
- `$breakpoint.lgAndDown`
- `$breakpoint.lgAndUp`
- `$breakpoint.xlOnly`
- `$breakpoint.width`
- `$breakpoint.height`

## Tests

    npm run test

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