# @philipbaker4/vue-responsive

> Vue plugin for matching media queries in JS or TS

Latest version **0.0.1** (published 2020-12-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install @philipbaker4/vue-responsive
pnpm add @philipbaker4/vue-responsive
yarn add @philipbaker4/vue-responsive
bun add @philipbaker4/vue-responsive
```

## Health

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

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2020-12-13 |
| First published | 2020-12-13 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.2 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Philip Baker |
| Maintainers | philipbaker4 |

## Links

- npm: https://www.npmjs.com/package/@philipbaker4/vue-responsive
- Repository: https://github.com/philbaker4/base-ts-package
- Issues: https://github.com/philbaker4/base-ts-package/issues
- npm.io page: https://npm.io/package/@philipbaker4/vue-responsive

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^2.6.12

## Recent versions

- 0.0.1 (latest) — 2020-12-13

## README

# vue-responsive

A template repository for developing Typescript packages.


### Installation
```bash
$ npm install vue-responsive
```


### Setup
```js
// in file with root vue initialization - typically main.js / main.ts
import { ResponsivePlugin } from 'vue-responsive';

const minSizeBreakpoints = {
  smLower: 640,
  mdLower: 768,
  lgLower: 1024,
  xlLower: 1480,
  xxlLower: 1500,
}

Vue.use(ResponsivePlugin, minSizeBreakpoints)
```

### Usage 
```js
// access screensize or computed properties via this.$responsive
console.log(this.$responsive.screenSize)
```

#### Available Methods 
- ```widthAbove(n)```
- ```widthBelow(n)```
- ```widthAboveOrEqualTo(n)```
- ```widthBelowOrEqualTo(n)```

#### Available Computed Properties
- ```screenSize```
- ```smAndUp```
- ```mdAndUp```
- ```lgAndUp```
- ```xlAndUp```
- ```smAndDown```
- ```mdAndDown```
- ```xlAndDown```
- ```xsOnly```
- ```smOnly```
- ```mdOnly```
- ```lgOnly```
- ```xlOnly```
- ```xxlOnly```

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