Skip to content

📱 💻 Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue.

License

Notifications You must be signed in to change notification settings

AlexandreBonaventure/vue-mq

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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,
  }
  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

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

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

Support

Please open an issue for support.