AStaroverov/v-media-query

easy media query for vue

vue media query methods (ru)

Plugin adds methods for work with media query in vue

General example:

import vMediaQuery from 'v-media-query'

Vue.use(vMediaQuery.default)

<some-component v-if="$mq.resize && $mq.above('600px')"></some-component>

v-if gets true for screen with width > 600px and updates after resizing

new Vue({
  created() {
    if (this.$mq.above(600)) {
      console.log('screen > 600px')
    }
  }
})

new Vue({
  watch: {
    '$mq.resize': 'screenResize'
  },
  methods: {
    screenResize() {
      if (this.$mq.above(600)) {
        console.log('screen > 600px')
      }
    }
  }
})

new Vue({
  computed: {
    screenMore600() {
      return this.$mq.resize && this.$mq.above(600)
    }
  }
})

and here

Defaults methods

All methods are allowed in $mq (mq = media query)

$mq.resize

• variable is trigger that update methods

---

$mq.above(measurement, value)
$mq.below(measurement, value)
$mq.between(measurement, [valMin, valMax])
$mq.beyond(measurement, [valMin, valMAx])

• measurement
  • Can take values: 'width', 'height'
  • Default value = 'width'
    example: $mq.above(600) == $mq.above('width', 600)
• value, valMin, valMax
  • Can take type Number and String
  • All values type of Number will be rewrited to Number + 'px'
    example: $mq.above(600) == $mq.above('600px')

---

$mq.expr(expression)

• expression - any valid css media query
  example: $mq.expr('screen and (max-device-width: 300px)')

Custom methods

Your can add custom methods to default methods

Example

Vue.use(vMediaQuery.default, {
  methods: {
    onlyForRetina() {
      return matchMedia('(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)').matches
    }
    fackAbove(...args) {
      return vMediaQuery.methods.above(...args)
    },
  }
})

<some-component v-if="$mq.onlyForRetina()"></some-component>
<some-component v-show="$mq.resize && $mq.fackAbove(800)"></some-component>

Variables

The plugin allows you to add custom variables in the vue
All variables are available in the $mv (mv = media variables)

Example

Vue.use(vMediaQuery.default, {
  variables: {
    hd: 1920,
    sm: '1240px'
  }
})

<some-component v-show="$mq.resize && $mq.between([$mv.sm, $mv.hd])"></some-component>

Names $mq and $mv

If u don't like names $mq and $mv u can change them

Example

Vue.use(vMediaQuery.default, {
  nameSpace: {
    methods: $$myMethods, // default $mq
    variables: __myVariables, // default $mv
  },
  variables: {
    hd: 1920,
  }
})

<some-component v-show="$$myMethods.resize && $$myMethods.above(__myVariables.hd)"></some-component>