mobile-device-detect を導入した

Vueプロジェクトでデバイス検出するためにmobile-device-detectを使ってみた。 普段のサービス開発では、nuxt-device-detectを使っていて、これはそれに似たもの。

www.npmjs.com

導入

$ yarn add mobile-device-detect

Vueファイルの中でいちいち呼び出すこともできるか、冗長なので手軽に呼び出せるようにする。

plugins/DeviceDetect.jsみたいなファイルを作って、下記のようにインスタンスプロパティを追加する。

import { deviceDetect } from "mobile-device-detect";

export default Vue => {
    Vue.prototype.$deviceDetect = deviceDetect();
};

こうするとすべてのVueインスタンスの中でthis.$deviceDetect.isMobileという風に使うことができる。

さらにここでユーティルを作っていろんなとこで使っている。 例えばこのライブラリではデバイスの向きは検出できないので、そこを補填して組み合わせるということができる。

import { deviceDetect, isMobileOnly } from "mobile-device-detect";

export default Vue => {
    Vue.prototype.$deviceDetect = deviceDetect();
    Vue.prototype.$deviceDetect.isSPLandscape = () => {
        return isMobileOnly && window.innerWidth > window.innerHeight;
    };
};