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
npm install vue-mqyarn add vue-mqDefine 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
})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>
`,
})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.
$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>
`,
})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.
v1.0+ now supports SSR. You can customize the defaultBreakpoint which let you set the breakpoint used by the server-side-rendering
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
Please open an issue for support.