Vue.jsでウィンドウサイズ(デバイス幅)変更を検知する方法

2021年6月6日Vue.js

Vue.jsでウィンドウサイズ(デバイス幅)変更を検知する方法を紹介します。
コンポーネントの切替などにも使えます。

Vue.jsでウィンドウサイズ(デバイス幅)変更を検知する方法

下の例ではメニューの切替を行います。
メニューの内容は関係ないので、それぞれ名前だけ記載します。
HeaderMobileとHeaderというコンポーネントとします。

App.vue

template

  <HeaderMobile v-if="mobileView" :items="items"></HeaderMobile>
  <Header v-else :items="items"></Header>

mobileViewというbooleanをとる変数を用意して、それのtrue/falseでコンポーネントを切り替えます。

script

import HeaderMobile from '@/components/HeaderMobile.vue'
import Header from '@/components/Header.vue'
export default {
  name: 'App',
  components: {
    HeaderMobile,
    Header,
  },
  setup(){
    // モバイル/PC切替
    const mobileView = ref(true)
    // windowのwidth
    const windowWidth = ref(0)

    // windowのwidthでモバイル/PC切替
    const calculateWindowWidth = () => {
      windowWidth.value = window.innerWidth
      // true/false
      return mobileView.value = windowWidth.value < 768
    }

    // メニューアイテム
    const items = reactive([
      {href: '#', title: 'Home'},
      {href: '#about', title: 'About'},
      {href: '#contact', title: 'Contact'},
    ])

    // resizeでウィンドウサイズ変更を検知
    onMounted(() => {
      window.addEventListener('resize', calculateWindowWidth)
    })


    return{
      mobileView,
      items,
    }
  }
}

ウィンドウサイズの変更を検知するためには、イベントリスナーのresizeを使います。
それをmountされたときに設定することでresizeを動的に検知できるようになります。

あとは、変更したい値、上の場合は、768pxの幅とwindowのinnerWidthを比べてtrueやfalseが返るようにメソッドを作成します。
それをイベントリスナーの第二引数に入れることで変更を検知できるようになります。