Skip to content
Vue Media Queries
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
.babelrc
.gitignore
.nvmrc
LICENSE
README.md
package.json

README.md

vue-mq

npm version JavaScript Style Guide license

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

You can’t perform that action at this time.