Hammerjs is not detecting swipe movement

Question

I'm using Hammerjs 2.0.8 with Nuxt, and I can't seem to make it detect swipe motion. Here's how I've done the setup. If I change the recognizer to [Hammer.Pan, { direction: Hammer.DIRECTION_HORIZONTAL }] and on pan event hammer.on('pan', this.handleTouchEvents); it runs this.handleTouchEvents method.

<template>
  <v-app>
    <v-main>
      <v-container id="touch-container" fluid>
        <div class="items">
          ...
        </div>
      </v-container>
    </v-main>
  </v-app>
</template>

<script>

export default {
  mounted () {
    const Hammer = require('hammerjs')
    const touchContainer = document.getElementById('touch-container')
    const hammer = new Hammer.Manager(touchContainer, {
      recognizers: [
        [Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }]
      ]
    })

    hammer.on('swipe', this.handleTouchEvents)
  },
  methods: {
    handleTouchEvents (e) {
      alert(e.type)
    }
  }
}
</script>

<style scoped>
#touch-container {
  height: 100%;
  min-width: 100%;
  overflow-x: hidden;
}

#items {
  touch-action: pan-y;
}
</style>

Any idea how to resolve this issue?

Answer 1

touchContainer is probably undefined.

2 Things:

1. Check if its on client side with process.client
2. Wait until Vue created the elements on the UI with this.$nextTick()

Here try this:

  async mounted () {
 
    if(process.client) {
       await this.$nextTick();
       const Hammer = require('hammerjs')
       const touchContainer = document.getElementById('touch-container')
       const hammer = new Hammer.Manager(touchContainer, {
         recognizers: [
           [Hammer.Swipe, { direction: Hammer.DIRECTION_HORIZONTAL }]
         ]
       })

       hammer.on('swipe', this.handleTouchEvents)
    }
  },