πŸ“± πŸ’» Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue.
Switch branches/tags
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist oups (Closes #14) Apr 23, 2018
examples update example Apr 20, 2018
src update deps + add array syntax support for component (Closes #11) Apr 20, 2018
test should work with falsy values (Fix #9) Mar 25, 2018
.editorconfig v0.0.1 Oct 27, 2017
.gitignore v0.0.1 Oct 27, 2017
LICENSE add license Oct 29, 2017
README.md Update README.md May 2, 2018
package.json Release 0.2.1 Apr 23, 2018
yarn.lock update deps + add array syntax support for component (Closes #11) Apr 20, 2018

README.md

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

Table of Contents

Installation

Using NPM

npm install vue-mq

Using Yarn

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 }

import Vue from 'vue'
import VueMq from 'vue-mq'

Vue.use(VueMq, {
  breakpoints: { // default breakpoints - customize this
    sm: 450,
    md: 1250,
    lg: Infinity,
  }
})

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

//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)

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.

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.

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

Support

Please open an issue for support.