vue-mqでレスポンシブ対応

vue-mqをインストール
$ yarn add vue-mq


vue-mqをインポートしてブレイクポイントを設定
// hello_vue.js

import VueMq from 'vue-mq'

Vue.use(VueMq, {
  breakpoints: {
    sm: 600,
    md: 900,
    lg: Infinity
  },
  defaultBreakpoint: 'lg'
});


テンプレートで使う
<template>
  <div>
    <div v-if="$mq === 'lg'">
      large
    </div>
    <div v-if="$mq === 'md'">
      middle
    </div>
    <div v-if="$mq === 'sm">
      small
    </div>
  </div>
</template>



参考記事:【Vue + vue-mq】レスポンシブ対応でのVue実装について - Qiita