Vue Component Development Kit

# Match Media

# Installation

$ npm install @vue-cdk/match-media --save

# Usage

You use @vue-cdk/match-media like this:

  • You import the mixin from @vue-cdk/match-media. The mixin is the default export of that package.
  • You add the mixin to the mixins–option of your component. This enables the match-media capbailities for that specific component.
  • Use the vcdkMediaQueriesByName–option of your component to define names media queries.

TIP

If you are a bit confused by the steps outlined above please take a look at the examples below.

# Examples

# Hello World: Using the Mixin

This example imports and uses the mixin. It also uses vcdkMediaQueriesByName to define three queries for three different size classes (mini, compact and regular). Those queries are arbitrary. You may use any valid CSS media query as the value. The mixin exposes a reactive object on your component called vcdkMq. This object has a key for each of your queries. The value of each entry in vcdkMq is either true (query matches) or false (query does not match).

TIP

Resize your browser window to see the effect.

  • vcdkMq.mini = false
  • vcdkMq.compact = false
  • vcdkMq.regular = false
  • vcdkMq.$all = []
Show Code
 
<template>
  <ul>
    <li>
      vcdkMq.mini = <code>{{ vcdkMq.mini }}</code>
    </li>
    <li>
      vcdkMq.compact = <code>{{ vcdkMq.compact }}</code>
    </li>
    <li>
      vcdkMq.regular = <code>{{ vcdkMq.regular }}</code>
    </li>
    <li>
      vcdkMq.$all = <code>{{ vcdkMq.$all }}</code>
    </li>
  </ul>
</template>

<script>
import MatchMedia from '@vue-cdk/match-media'

export default {
  mixins: [MatchMedia],
  vcdkMediaQueriesByName: {
    mini: 'only screen and (max-width: 400px)',
    compact: 'only screen and (min-width: 500px) and (max-width: 600px)',
    regular: 'only screen and (min-width: 600px)',
  },
}
</script>

# Using the injected reactive Object

You may have noticed that vcdkMq is only available on the instance that actually uses the mixin. If you want to make vcdkMq available to your child components you can do so manually. However, you should know that @vue-cdk/match-media also provides the object to all of it's child components by default. So in theroy there is no need to manually make vcdkMq available to your child components. Just use inject like so:

  • false
  • false
  • false
Show Code
 
<template>
  <Consumer />
</template>

<script>
import MatchMedia from '@vue-cdk/match-media'

const Consumer = {
  inject: ['$vcdkMq'],
  render(h) {
    const { $vcdkMq } = this
    const items = [
      h('li', String($vcdkMq.mini)),
      h('li', String($vcdkMq.compact)),
      h('li', String($vcdkMq.regular)),
      h('li', String($vcdkMq.$all)),
    ]
    return h('ul', items)
  },
}

export default {
  components: { Consumer },
  mixins: [MatchMedia],
  vcdkMediaQueriesByName: {
    mini: 'only screen and (max-width: 400px)',
    compact: 'only screen and (min-width: 500px) and (max-width: 600px)',
    regular: 'only screen and (min-width: 600px)',
  },
}
</script>

`Consume` can be anything

In the example above Consume is just a placeholder for an arbitrary child component. You may not even control or know about the child componet.

# Misc

# vcdkMq.$all

The reactive object vcdkMq has a specia property called $all. The value of vcdkMq.$all is an array of query names that currently match.

`vcdkMq.$all` is sorted

vcdkMq.$all is sorted

# Origin and Credits

@vue-cdk/match-media was heavily inspired by drenglish/vue-match-media (opens new window). The main difference between those two is that @vue-cdk/match-media takes a slighlty more conservative approach: drenglish/vue-match-media (opens new window) is doing a lot of magic out of the box that @vue-cdk/match-media does not.

Playground