VueJS plugin that adds reactive CSS based media-queries to your component instances without resize listeners.

Usage no npm install needed!

<script type="module">
  import vueDeviceQueries from '';


Vue device-queries

Reactive Vue.js media-queries without resize event listeners using window.matchMedia. Includes a polyfill that uses resize events when browser support is missing. See it in action


Requires Vue.js 2.x


npm i vue-device-queries

Define queries

import Vue from 'vue'
import DeviceQueries from 'vue-device-queries'

Vue.use(DeviceQueries, {
  phone: 'max-width: 567px',
  tablet: 'min-width: 568px',
  mobile: 'max-width: 1024px',
  laptop: 'min-width: 1025px',
  desktop: 'min-width: 1280px',
  monitor: 'min-width: 1448px'

Use in components

  <main class="app">
    <side-bar v-if="$device.laptop"/>
    <dash-board :items-per-row="itemsPerRow"/>

export default {
  name: 'App',
  computed: {
    itemsPerRow() {
      return (this.$ ? 1
        : (this.$device.tablet) ? 2
        : 3