# vue-mq

> Handle media queries easily & build responsive design with Vue

Latest version **1.0.1** (published 2018-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-mq
pnpm add vue-mq
yarn add vue-mq
bun add vue-mq
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2018-12-12 |
| First published | 2017-10-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 920 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 529 |
| Author | Alexandre Geissmann |
| Maintainers | alexandrebonaventure |

## Links

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

## Dependencies (1)

- [json2mq](https://npm.io/package/json2mq.md) ^0.2.0

## Recent versions

- 1.0.1 (latest) — 2018-12-12
- 1.0.0 — 2018-12-12
- 0.2.1 — 2018-04-23
- 0.2.0 — 2018-04-20
- 0.1.3 — 2018-03-25
- 0.1.2 — 2018-03-10
- 0.1.1 — 2018-03-06
- 0.1.0 — 2017-11-20
- 0.0.1 — 2017-10-29

## README

# Vue MQ (MediaQuery)
Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue.

_Use with `vue:  ^2.x.x`
_

**Demo**: [here](https://alexandrebonaventure.github.io/vue-mq)

## Table of Contents

- [Installation](#installation)
- [Usage](#usage)
- [SSR Support](#ssr-support)
- [Browser Support](#browser-support)
- [Support](#support)


## Installation

#### Using NPM

```sh
npm install vue-mq
```
#### Using Yarn
```sh
yarn add vue-mq
```

## Usage

#### 1. Install plugin
Define your custom breakpoints by passing `breakpoints` option. This let you name the breakpoints as you want
**Eg**:
`{ phone: 500, tablet: 1200, other: Infinity }`
`{ small: 500, large: 1200, whatever: Infinity }`
`{ xs: 300, s: 500, m: 800, l: 1200, xl: Infinity }`
```js
import Vue from 'vue'
import VueMq from 'vue-mq'

Vue.use(VueMq, {
  breakpoints: { // default breakpoints - customize this
    sm: 450,
    md: 1250,
    lg: Infinity,
  }
  defaultBreakpoint: 'sm' // customize this for SSR
})
```
#### Use `$mq` property
After installing the plugin every instance of Vue component is given access to a reactive $mq property. Its value will be a `String` which is the current breakpoint.

**Eg:** _(with default breakpoints)_
`'sm'` => **0 > screenWidth < 450**
`'md'` => **450 >= screenWidth < 1250**
`'lg'` => **screenWidth >= 1250**

```js
//Use it in a component
new Vue({
  template: `
    <h1>current: {{$mq}}</h1>
  `,
})
```

#### Use `$mq` property with the mq filter
Using the filter allow to build your responsive design in a declarative way. This can be very useful and elegant to pass down props to layout component. (eg: a grid system)

```js
new Vue({
  template: `
    <grid-component :column="$mq | mq({ sm: 1, md: 2, lg: 3 })">
    </grid-component>
  `,
})
```

Remember that the filter design embrace mobile-first philosophy so writing `$mq | mq({ sm: 1, lg: 3 })` will output `1` for `md` breakpoint if omited. In short it will always fallback to the smallest breakpoint (_aka mobile_) if value isn't overriden by a largest breakpoint.


#### Use `$mq` with a computed property
`$mq` property is fully reactive (like a data property) so feel free to use it in a computed.

```js
new Vue({
  computed: {
    displayText() {
      return this.$mq === 'sm' ? 'I am small' : 'I am large'
    }
  },
  template: `
    <h1>{{displayText}}</h1>
  `,
})
```

#### MqLayout component
In addition to `$mq` property this plugin provide a wrapper component to facilitate conditional rendering with media queries.

**Usage**:
```
<mq-layout mq="lg">
  <span> Display on lg </span>
</mq-layout>
<mq-layout mq="md+">
  <span> Display on md and larger </span>
</mq-layout>
<mq-layout :mq="['sm', 'lg']">
  <span> Display on sm and lg </span>
</mq-layout>
```
**Props**
mq => required : String | Array

*Important*: note that you can append a `+` modifier at the end of the string to specify that the conditional rendering happens for all greater breakpoints.

## SSR Support
v1.0+ now supports SSR. You can customize the `defaultBreakpoint` which let you set the breakpoint used by the server-side-rendering 

## Browser Support
This plugin relies on matchMedia API to detect screensize change. So for older browsers and IE, you should polyfill this out:
Paul Irish: [matchMedia polyfill](https://github.com/paulirish/matchMedia.js)

## Support

Please [open an issue](https://github.com/AlexandreBonaventure/vue-mq/issues/new) for support.

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