Vue でウィンドウサイズの変更を検知したいとき

Vue を使っていてウィンドウのリサイズを検知するには、Vuetify というコンポーネントフレームワークの v-resize というカスタムディレクティブが便利です。

<template>
  <span v-resize="onResize">{{ windowSize }}</span>
</template>

<script>
  export default {
    data: () => ({
      windowSize: {
        x: 0,
        y: 0,
      },
    }),

    mounted () {
      this.onResize()
    },

    methods: {
      onResize () {
        this.windowSize = { x: window.innerWidth, y: window.innerHeight }
      },
    },
  }
</script>

このように、テンプレートで v-resize に発火したいメソッド名を渡すだけで、ウィンドウのサイズが変更された時にそのメソッドを実行することができます。

ウィンドウや要素の幅に応じて動的に何かを設定する必要があるコードでは便利ですね。手元のコード量がほとんど増えないのが個人的にうれしいポイントです。