Namespace conflict with Vuetify v-touch

[Anders-Lunde]

Hi!
Vue-touch-events stopped working after I installed Vuetify (https://vuetifyjs.com/en/). I see that Vuetify also has a v-touch directive, https://vuetifyjs.com/en/api/v-touch/. This is probably why my vue-touch-events stopped working. How can I deal with this? I want to use vue-touch-events, since it has more options that Vuetify, but it seems to be overridden by Vuetify and no longer works.
Anders

This is how I use vue-touch-events:
v-touch:swipe="swipeHandler"

[jerrybendy]

Hi,

This is a known issue. This would change so many code and the usage. I have a plan to solve this, but I have no enough time to make these big changes. 😞

[Anders-Lunde]

Thanks. Do you have any advice/hack/quickfix for me now? Can i disable vuetify namepace somehow maybe? tir. 9. feb. 2021, 16:42 skrev Jerry Bendy <notifications@github.com>:

…

Hi, This is a known issue. This would change so many code and the usage. I have a plan to solve this, but I have no enough time to make these big changes. 😞 — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#86 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AGGHTNIX6GRV6AP7MLHONOLS6FJV7ANCNFSM4XLE2S5Q> .

[jerrybendy]

vue-touch-events has only one file index.js, you can copy this file to your project and change the directive name to others 🤔

[Anders-Lunde]

vue-touch-events has only one file index.js, you can copy this file to your project and change the directive name to others 🤔

Thanks! This solved my problem. For others:

Copied your index into /src/js/vTouchDirective.js
and did this change:

//import Vue2TouchEvents from "vue2-touch-events";
import Vue2TouchEvents from "./js/vTouchDirective";

and this change in the js file:

//Vue.directive("touch", {
Vue.directive("touchCustom", {

Also:

//Not sure if this is neccessary. Its since I copied the vue-touch-events npm package
//into a file, to change the namespace conflict with Vuetify.
import { PluginObject } from "vue";
declare const Vue2TouchEvents: PluginObject;
export interface Vue2TouchEventsOptions {
disableClick?: boolean;
touchClass?: string;
tapTolerance?: number;
swipeTolerance?: number;
longTapTimeInterval?: number;
}
export default Vue2TouchEvents;

[icleolion]

I use both vue-touch-events and vuetify. I've not run into any conflicts, but I use vuetify-loader to treeshake and only include vuetify features that I use. Due to the benefits of treeshaking I would recommend going that route instead of going to the effort of moving vue-touch-events into another namespace.

Alternatively, if a change is to be made in this project, instead of hardcoding the directive name, keep "touch" the default but give people the option to pass another name in when calling Vue.use() for edge cases where conflicts arise.

[jerrybendy]

@icleolion Add a new option is the easiest way, not the best way. But.... suggest accepted 😂 I've added a namespace option in the latest v3.2.0 version.

[icleolion]

Considering how few people should have to use the namespace option, I'm glad you've taken the easy way out. Not worth you making massive changes, especially when they have other solutions like using vuetify-loader to do treeshaking, which should be the preferred solution as vuetify is massive and no one uses all of it.

Is there any reason I can't see anything about 3.2.0 here on github?

[jerrybendy]

@icleolion I forgot to push code to GitHub until an email noticed me today 😂 I have pushed them just now 😅