vue-responsive

app.js

import Responsive from './utils/responsive'

Vue.use(Responsive, {
  computed: {
    mobile () {
      return this.width <= 768
    },
    tablet () {
      return this.width <= 900
    },
    desktop () {
      return !this.tablet
    },
  },
})

Demo.vue

<template>
  <div>
    <div v-if="$responsive.mobile">Mobile</div>
    <div v-else-if="$responsive.tablet">Tablet</div>
    <div v-else>Desktop</div>
  </div>
</template>

responsive.js

export let responsive

export default {
  install (Vue, options) {
    const finalOptions = Object.assign({}, {
      computed: {},
    }, options)

    responsive = new Vue({
      data () {
        return {
          width: window.innerWidth,
          height: window.innerHeight,
        }
      },
      computed: finalOptions.computed,
    })

    Object.defineProperty(Vue.prototype, '$responsive', {
      get: () => responsive,
    })

    window.addEventListener('resize', () => {
      responsive.width = window.innerWidth
      responsive.height = window.innerHeight
    })
  },
}