vue-device-queries

1.0.11 • Public • Published

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

Usage

Requires Vue.js 2.x

Install

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

<template>
  <main class="app">
    <side-bar v-if="$device.laptop"/>
    <dash-board :items-per-row="itemsPerRow"/>
  </main>
</template>
 
<script>
export default {
  name: 'App',
  computed: {
    itemsPerRow() {
      return (this.$device.phone) ? 1
        : (this.$device.tablet) ? 2
        : 3
    }
  }
}
</script> 

Package Sidebar

Install

npm i vue-device-queries

Weekly Downloads

4

Version

1.0.11

License

MIT

Unpacked Size

23.8 kB

Total Files

9

Last publish

Collaborators

  • udyux