Using with Nuxt creates infinite loop

[alexsserban]

Hello,

I've used this plugin with success in the past in a Vue app. This time I am trying to integrate it in a larger Nuxt JS app, but unfortunately, a big bug appeared. Basically, I changed all the click events with v-touch (the default for the tap event on mobile with support for click events on desktop), but by doing this, an infinite loop is created when I open up a page by the fact that all the clickable element are actually clicked automatically.

I added the plugin by following @ #32

If you have any recommendations would be very welcomed because we need to deploy this app soon.

[jerrybendy]

I have no idea about this because I don't use Nuxt. If you have solved this issue, please add a comment to help more people with same issue :)

[niwasmala]

Same here but I use gridsome. When I check, it actually happen because I use v-touch like v-on, e.g.

<button v-touch="myFunction('param')"></button>

When i see this documentation, I change the code to something like this

<button v-touch="() => { myFunction('param') }"></button>

and it works. Hope it helps.

[tvdeyen]

I had the same problem.

After renaming the plugin from ~/plugins/vue2-touch-events.js into ~/plugins/vue-touch.js it works.

I assume one must not name a Nuxt plugin the same as the npm module name.

This is my config

// ~/plugins/vue-touch.js
import Vue from "vue"
import Vue2TouchEvents from "vue2-touch-events"

Vue.use(Vue2TouchEvents)

// ~/nuxt.config.js
export default {
  // ...,
  plugins: ["~/plugins/vue-touch"],
  // ...,
}

[ahmedaltaai]

Same here but I use gridsome. When I check, it actually happen because I use v-touch like v-on, e.g.

<button v-touch="myFunction('param')"></button>

When i see this documentation, I change the code to something like this

<button v-touch="() => { myFunction('param') }"></button>

and it works. Hope it helps.

This worked for me! thank you @niwasmala