Vue でのレスポンシブ対応に v-media-query を使う

はじめに

Web サイトのレスポンシブ対応のため、 Vue で Media Query を扱えるパッケージを探したところ、直近で最新のものが v-media-query だったので使ってみた（もっと探せば他にあるかもしれません）
https://www.npmjs.com/package/v-media-query

実際に使ってみた

基本的な使い方

1. 導入する

   $ npm install v-media-query
   

2. Vue で使えるようにする

   import vMediaQuery from 'v-media-query'
   
   Vue.use(vMediaQuery.default)
   

3. v-if に条件を記述する

   <div v-if="$mq.resize && $mq.above('767px')"></div>
   

ビューポートのサイズ変更後、 width > 767px となっている場合にこの要素がレンダされる

カスタムメソッド

上記の場合、条件にサイズを直接書くことになるため、複数箇所で利用する場合、利便性に欠ける
カスタムメソッドを定義しておくと、同じ値を複数箇所で記述する必要がなくなる

import vMediaQuery from 'v-media-query'

Vue.use(vMediaQuery.default, {
  methods: {
    abovePc() {
      // width > 767px
      return vMediaQuery.methods.above('767px')
    }
  }
})

<div v-if="$mq.resize && $mq.abovePc()"></div>