vue-mq

Note: Draft, not quite production ready.

Vue.js 2.0+ plugin for media queries.

Installation

yarn add @wearelucid/vue-mq

Integration

import { MediaQueries } from 'plugins/mediaqueries'

// Define your breakpoints or import them from elsewhere
const breakpoints = {
  small: 400,
  medium: 768,
  large: 1100,
  huge: 1400
}

Vue.use(MediaQueries, { breakpoints })

And then use it in your components

// JSX Example
Vue.component({
  // ...
  render (h) {
    return (
      <div>
      {this.$query({ from: 'medium' })
        ? 'Small Content'
        : 'Large Content'}
      </div>
    )
  }
})

Use cases:

this.$query({ from: 'medium' })
this.$query({ from: 'small', to: 'large' })
this.$query({ to: 'large' })

Or, as another example, display the currentBreakpoint

// JSX Example
Vue.component({
  name: 'DevStats'
  // ...
  render (h) {
    return (
      <span> Current Breakpoint: {this.$mq.current.name} @ {this.$mq.current.value}px </span>
    )
  }
})

Todos

• Validate reactive property. Is this correctly implemented? (_mq, mq, $mq)
• Option to sync with CSS (e.g by reading breakpoints from JSON String, which we set <title>'s font-size property)
• Implement alternative way to pass in breakpoints
• Tests
• Npm Compat

Browser Support

IE8+ (See clientWidth) Uses matchMedia for newer browsers but has a polyfill for IE8/IE9.

License

MIT