Nuxt.js/Vue.jsでもスワイプでページ移動したい

Nuxt.jsで開発しているけど、スワイプで画面遷移とかしたいなと思い、
いろいろ調べたときの備忘録。

vue-touch-eventsというのが良さそう(´ω｀)
hammer.jsというライブラリのラッパーらしい。

hammer.jsではスワイプだけでなく、
Pan / Pinch / Press / Rotate / Tapも検知できるよう。すごい。。

インストール

$ npm i -S vue2-touch-events

pluginの作成

~/plugins/vue2-touch-events.tsを作成

import Vue from 'vue'
import Vue2TouchEvents from 'vue2-touch-events'

Vue.use(Vue2TouchEvents)

nuxt.config.tsの設定

作ったプラグインを設定する

const config: NuxtConfiguration = {
  plugins: [
    { src: "~/plugins/vue2-touch-events.ts", ssr: false }
  }
}

使ってみる

<template>
  <div
    v-touch:swipe.left="() => $router.push('left_page')"
    v-touch:swipe.right="() => $router.push('right_page')"
  >
  </div>
</template>

簡単( ﾟдﾟ)!

v-touch:swipe.leftなどのディレクティブが用意されているので、
必要なものを選択してcallback関数を設定すればOK。

タップなどの他のものは、GitHubのREADMEを参照。

モバイルだけスワイプを有効にする

ユーザエージェントを見て有効/無効を設定する。
ユーザエージェントの判定は、nuxt-user-agentが便利♪

設定方法や使い方などは、以前書いたこちらの記事を参照ください。

nuxt-user-agentと一緒に使って、モバイルだけスワイプを有効にするとこんな感じ。

<template>
  <div
    v-touch:swipe.left="() => { if(!$ua.isFromPc()) $router.push('left_page') }"
    v-touch:swipe.right="() => { if(!$ua.isFromPc()) $router.push('right_page') }"
  >
  </div>
</template>

作ってるサービスではこんな感じに

開発しているWebサービスではこんな感じに♪
サクッと導入できて便利でした(´ω｀)

おぉスワイプでページ遷移できたかも( ﾟдﾟ)!

vue2-touch-eventsすごい...(´ω｀) pic.twitter.com/vOZjQOmiLA

— 積読ハウマッチ📚きらぷか (@kira_puka) September 15, 2019

ランキングにもスワイプをつけてみた(´ω｀)

これでスマホでもスイスイ見れるヽ(=´▽`=)ﾉ pic.twitter.com/jJL1zUvFGk

— 積読ハウマッチ📚きらぷか (@kira_puka) September 15, 2019

こんなのつくってます！！

最近、積読用の読書管理アプリ「積読ハウマッチ」をリリースしました！
積読ハウマッチは、Nuxt.js+Firebaseで開発してます!

もしよかったら、遊んでみてくださいヽ(=´▽`=)ﾉ

要望・感想・アドバイスなどあれば、
公式アカウント(@MemoryLoverz)や開発者(@kira_puka)まで