vueでモバイル判定をする

ユーザーエージェントで判定

isMobile.js

ライブラリを追加

yarn add ismobilejs

テンプレートで出し分けしたい場合


  <template>
    <div v-if="isMobile.phone">
      <div>モバイルで表示</div>
    </div>
  </template>
  import isMobile from "ismobilejs";
  export default {
    data:()=>{
      isMobile
    }
  }

レスポンシブで判定

vue-mq

ライブラリを追加

yarn add vue-mq

テンプレートで出し分けしたい場合


  <template>
    <div v-if="$mq==='sp'">
      <div>モバイルで表示</div>
    </div>
  </template>
  <script>
  import Vue from "vue";
  import VueMq from "vue-mq";

  const breakpoints = {
    sp: 400,
    pc: 1024
  };
  Vue.use(VueMq, { breakpoints });
  </script>

Vue.jsでWebサイトを作るときに使ったライブラリ

Webサイトでよく見る動きや機能を追加しようとしたときに便利だった、実際に使ったライブラリのリストです。

vue-backtotop

名前の通り、トップに戻るボタンです。
ボタンに表示する文字やアイコンの変更も簡単。

vue-scrollto

ページ内リンクにスムーススクロールをつけるときに使いました。
Webサイトのヘッダーをトップに固定しているとスクロール先がヘッダーの下に潜りこんでしまうので、offsetの設定を忘れずに。
main.js
Vue.use(VueScrollTo, {
  offset: -80 //headerの高さの分
})
 offset以外にもスクロールの速度なども設定できます。

他画面からの移動

idを指定するだけではアンカーリンクが機能しなかったので以下のように対処しました。
URLパラメータからアンカーを取得し、this.$scrollTo()を使ってスクロール。
移動先のページ
  mounted () {
    const hash = this.$route.hash
    if (hash && hash.match(/^#.+$/)) {
      this.$scrollTo(hash)
    }
  }
 しかし、これだけだとページの中にidを指定しているにも関わらず、 [vue-scrollto warn]: Trying to scroll to an element that is not on the page となってしまいました。むむむ。

setTimeout()してみたら動きました。

 mounted() {
    setTimeout(this.scroll, 300);
  },
 methods: {
    scroll() {
      const hash = this.$route.hash;
      if (hash && hash.match(/^#.+$/)) {
        this.$scrollTo(hash);
      }
   }
  }

vue-carousel

カルーセルが簡単に実装できます。
マウスドラッグやスマホのスワイプでも動く。便利。
カスタマイズの設定はGitHubで確認。

vue-material-design-icons

マテリアルデザインアイコン。
使いたいところにコンポーネントを入れるだけなのでお手軽。
アイコンの名前を調べる時はこちらのページが便利。

vue-meta

title、descriptionやogなど、headに記述するメタ情報の設定に使いました。

vue-social-sharing

FacebookやTwitterなど、SNSのシェアボタンを各ページに付けるときに。

google-maps-api-loader

GoogleMapを入れるときに使いました。
ページにマップを追加するコンポーネントを作る時はこのあたりを参考にしました。

date-fns

日付の書式を整えるときに使いました。