nuxt.jsで現在のウインドウサイズをどのコンポーネントからでもリアクティブなオブジェクトとして取得できるプラグインのつくりかた

はじめに

スマホに対応中に、要素の有無をcssの@media指定とdisplay:noneじゃなくてv-ifで操作したいけどめんどくさそうだから楽にしたいという欲求からプラグインの作り方から勉強したやつ。
※注 nuxt.jsのUniversalモードを使用している場合は、このアプローチだと表示崩れを招く原因となるので、素直にCSSかuser-agentで表示切り替えを行いましょう

とりあえずコード

plugins/window-resize.js

import Vue from 'vue'

Vue.use({
  install(Vue) {
    const $window = Vue.observable({
      width: 0,
      height: 0,
    })
    let queue = null
    const wait = 100

    const getWindowSize = () => {
      clearTimeout(queue);

      queue = setTimeout(function () {
        $window.width = document.documentElement.clientWidth
        $window.height = document.documentElement.clientHeight
      }, wait);
    }

    global.addEventListener('resize', getWindowSize)
    getWindowSize()

    Vue.prototype.$window = $window
  }
})

nuxt.config.js

plugins: [
  {src: '~/plugins/window-resize.js'}, 
],

せつめい

install(Vue) - Vueのプラグインを作るときに必須のメソッド。詳しくはプラグインの記述(公式ドキュメント)
Vue.observable(object) - vue.jsおなじみのdata関数の戻り値にも適用されているメソッドで、このメソッドに処理されることによって、戻り値にリアクティブオブジェクトが得られる。Vue.observable( object )(公式ドキュメント)
setTimeout - resizeのイベントリスナーは数pxリサイズされる毎に発火され、どこからでも使える割に鬱陶しいので上記サンプルでは0.1秒スクロールが止まるまでは発火を抑制するようにしています。
global.addEventListener('resize', getWindowSize) - ここで、どこで画面をリサイズしても、ウインドウサイズが取得されるようにしている。
Vue.prototype.$window = $window - ここでどこからでもthis.$windowで使えるようにしている。

おわりに

<div v-if="$window.width > 1080">おつかー！</div>みたいな感じで表示を司ることができました！
vueプラグインなるものを初めて作ってみたのですが、Vue.observable君が便利ですね・・・
今後もいろいろ作って引き出し増やして行きたいと思ってます！