vue-mq
vue-mq copied to clipboard
📱 💻 Define your breakpoints and build responsive design semantically and declaratively in a mobile-first way with Vue.
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
- Usage
- SSR Support
- Browser Support
- Support
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.