とある案件でスマホのスワイプ処理を実装する必要があったのですが、ぐぐってもライブラリ推しの記事しかなかったので独自実装の方法を書いておきます。

ライブラリ不要！Vue.js でスワイプ処理を実装する方法

ちなみに、実装をしたのは Vue2 系です。
要件はバナーのスライダーをスワイプでもスライドできるようにしてほしいとのこと。
以下、コードです。

HTML

<template>
  <img
    src="https://sample.com/image.jpg"
    @touchstart="OnTouchStart($event)"
    @touchmove="OnTouchMove($event)"
    @touchend="OnTouchEnd()"
  />
</template>

テンプレートには、該当する要素に @touchstart @touchmove @touchend の3つのハンドラにそれぞれ処理を定義します。OnTouchStart と OnTouchMove の処理には、スクロール位置を取得するので引数に $event を渡しておきましょう。

Vue.js

<script>
    export default {
        methods: {
            OnTouchStart: function (e) {
                this.swipe.flag = true;
                this.swipe.start.x = e.touches[0].pageX;
            },
            OnTouchMove: function (e) {
                this.swipe.current.x = e.touches[0].pageX;
                this.swipe.distance.x = this.swipe.current.x - this.swipe.start.x;
                if( this.swipe.flag && this.swipe.distance.x > 0 && this.swipe.distance.x >= this.swipe.threshold){
                    // 右スワイプ後の処理を記述
                    this.swipe.flag = false;
                }
                if( this.swipe.flag && this.swipe.distance.x < 0 && this.swipe.distance.x >= this.swipe.threshold * -1){
                    // 左スワイプ後の処理を記述
                    this.swipe.flag = false;
                }
            },
            OnTouchEnd: function () {
                this.swipe.flag = false;
            },
        },
        data() {
            return {
                swipe: {
                    flag: false,
                    threshold: 60,
                    start: {
                        x: 0
                    },
                    current: {
                        x: 0
                    },
                    distance: {
                        x: 0
                    },
                },
            };
        },
    };
</script>

まとめ｜とりあえず横判定だけのスワイプ処理

ということで、Vue.jsのスワイプ判定処理方法を記載しましたが、とりあえず横判定だけです
this.swipe.flag という感じでフラグを立てていますが、フラグなしでもう少しスマートにしたかったところです。
あと、スワイプの閾値は60pxとしていますが、体感少し早い気がするので、100ぐらいで設定しておいたほうがいいかもしれません。
以上、ライブラリを使わないVue.jsのスワイプ判定の実装方法でした。