[Bug Report] V-Touch directive is broken in 2.0 #130

cmseeling · 2019-07-25T23:59:13Z

Environment

Vuetify Version: 2.0.1
Vue Version: 2.6.10
Browsers: Chrome 75.0.3770.142
OS: Windows 10

Steps to reproduce

Add a v-touch directive to a component.

Expected Behavior

V-touch directive works with touch inputs.

Actual Behavior

V-touch throws exception: "Failed to resolve directive: touch"

Reproduction Link

https://github.com/cmseeling/vuetify-touch-issue

johnleider · 2019-07-26T00:37:33Z

So I spent quite a bit of time on this and I could not reproduce the issue whatesoever outside of that environment. So I decided to strip the application down to a basic js one, and it was still having the import issue. At this point, I'm honestly not sure, but I can confirm that 2 of my recent apps, one is brand new and one is recently upgraded, it worked as expected.

cmseeling · 2019-07-26T01:23:22Z

I just tried creating a new project with no custom settings selected (no TypeScript, no vuex or router) through the Vue CLI and still get the error when adding the v-touch directive.

Are there differences in the package-lock file between your clean app that works and the file in the reproduction repo?

For reference, here's a picture of the options I selected when creating the reproduction repo:

KaelWD · 2019-07-26T02:49:29Z

Update vue-cli and try again?

rounce · 2019-07-26T03:17:16Z

I have the same issue, only manual import of the touch directive helped. vue-cli version is 3.9.3.
I can confirm that 2 of my recent apps, one is brand new (vue create test; cd test; vue add vuetify with default features; yarn serve) and one is recently upgraded, it worked not as expected.

cmseeling · 2019-07-26T03:38:56Z

I upgraded my vue-cli version to 3.9.3 and generated a new app with all of the defaults selected, and the problem is still there.

libid0nes · 2019-07-26T19:50:08Z

Similar issue after upgrading to 2.0

[Vue warn]: Failed to resolve directive: touch

(found in <App> at src/App.vue)

My code hasn't changed since the migration, and it looks like this:

// App.vue
<v-layout v-touch="{ right: () => SwipeRight(), left: () => SwipeLeft() }">
    ...
</v-layout>

Vuetify Version: 2.0.0
Vue Version: 2.6.10
Vue CLI : 3.9.3
Browsers: Chrome 74.0.3729.169
OS: Windows 10 1903

razorfever · 2019-07-28T11:07:38Z

I don't know if this is related but I was having similar issue with the scroll directive.
I was able to fix it by going "old school" and manually definining the directives like this:

// plugins/vuetify.js
import Vuetify from 'vuetify/lib';
import { Ripple, Scroll } from 'vuetify/lib/directives';

Vue.use(Vuetify, {
  directives: {
    Ripple,
    Scroll,
  },
});

export default new Vuetify({ ... });

struers-mfr · 2019-08-09T14:12:40Z

I have same issue, I have latest vue-cli 3.10.0 also tried what @razorfever suggests
to import { Touch } from 'vuetify/lib/directives'
and use it in vuetify object under directives in plugin spec but with no luck

mseele · 2019-08-28T17:45:42Z

I have the same issue (after upgrading from vuetify 1.5).

Adding

// plugins/vuetify.js
import { Touch } from 'vuetify/lib/directives'

Vue.use(Vuetify, {
  directives: {
    Touch
  }
})

...

fixes it.

TheFrogDaddy · 2019-10-08T08:51:18Z

import { Touch } from 'vuetify/lib/directives'

This doesn't work for me, any updates on this or other workarounds?

jperelli · 2019-11-23T12:04:54Z

Same for me, It doesn't work. Full report:

// main.ts

import Vuetify, { ... } from 'vuetify/lib'
import { Ripple, Touch } from 'vuetify/lib/directives'
...
Vue.use(Vuetify, {
  components: {
  ...
  },
  directives: {
    Touch,
  },
  theme: {
    primary: '#51B2E0',
  },
})
...
const vueInstance = new Vue({
  vuetify,
  ...
  render: h => h(App),
})
document.addEventListener('DOMContentLoaded', function () {
  vueInstance.$mount('#app')
})
export default vueInstance

// component.vue
...
      <span
        class="card"
        @click="toggleSmallResults"
        v-touch="{
          left: nextResult,
          right: prevResult
        }">
...

Traceback:

vue.runtime.esm.js?2b0e:619 [Vue warn]: Failed to resolve directive: touch

(found in <RecorridosResultList> at src/components/ABSearchResults/RecorridosResultList.vue)

lebesnec · 2019-11-25T22:37:43Z

same error with the v-resize directive...

lebesnec · 2019-12-02T15:17:30Z

upgraded vuetify to 2.1.12 and vuetify-loader to 1.4.2 and it's working now.

TimV81 · 2019-12-06T11:37:55Z

I'm on vuetify 2.1.13 and vuetify-loader 1.4.3 but still can't get the v-touch directive working, either with or without the manual plugin.js modification. I've got the v-touch directive implemented on a v-list-item

lebesnec · 2019-12-06T12:48:03Z

I'm on vuetify 2.1.13 and vuetify-loader 1.4.3 but still can't get the v-touch directive working, either with or without the manual plugin.js modification. I've got the v-touch directive implemented on a v-list-item

did you try the import syntax from @mseele ? This one :
https://github.com/vuetifyjs/vuetify/issues/8027#issuecomment-525850033

It is working for me with the Resize directive with vuetify 2.1.12 and vuetify-loader 1.4.2.

TimV81 · 2019-12-06T12:57:40Z

did you try the import syntax from @mseele ? This one :
#8027 (comment)

It is working for me with the Resize directive with vuetify 2.1.12 and vuetify-loader 1.4.2.

~~Yes, but didn't work.~~

update: this actually does work. I placed the reference in the constructor instead of the use.Vue() call.

jperelli · 2019-12-14T00:39:55Z

Same for me, It doesn't work. Full report:

Sorry, I also configured it wrongly. I followed all the instructions again and it worked!

ghansham · 2020-05-02T00:22:50Z

It seems it is still broken in the latest version of vuetify 2.2.26 and vuetify loader 1.4.3. Any update on this? Do we have support for swipeable components in vuetify?

ghansham · 2020-05-02T00:30:37Z

Either way it does not work. whether using Vue.use call or passing reference to the constructor

libid0nes · 2020-05-02T07:44:00Z

In my case, it only works like this:

import Vue from '../../node_modules/vue';
import Vuetify from 'vuetify/lib';
import { Touch } from 'vuetify/lib/directives';

Vue.use(Vuetify, {
  directives: {
    Touch,
}});

export default new Vuetify({
  theme: {
      options: {
        customProperties: true,
      },
      dark: true,
  },
  icons: {
    iconfont: 'fa' && 'md',
  },
});

ghansham · 2020-05-02T13:26:14Z

Which vuetify version and loader version are you using? And any idea about swipeable controls in vuetify?

…

On Sat, May 2, 2020, 13:14 Libidine ***@***.***> wrote: In my case, it only works like this: import Vue from '../../node_modules/vue'; import Vuetify from 'vuetify/lib'; import { Touch } from 'vuetify/lib/directives'; Vue.use(Vuetify, { directives: { Touch, }}); export default new Vuetify({ theme: { options: { customProperties: true, }, dark: true, }, icons: { iconfont: 'fa' && 'md', }, }); — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://github.com/vuetifyjs/vuetify/issues/8027#issuecomment-622811245>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAYXFJGPOPSFB6WZIIG6OXDRPPFMXANCNFSM4IG7JTTA> .

libid0nes · 2020-05-02T13:37:01Z

Which vuetify version and loader version are you using? And any idea about swipeable controls in vuetify?

I use:

    "vuetify": "^2.2.26",
    "vuetify-loader": "^1.4.3",
    "vue-cli-plugin-vuetify": "~2.0.5",

Swipeable in App.vue:

<template>  
  <v-app> 
  <v-layout v-touch="{ right: () => SwipeRight(), left: () => SwipeLeft(), down: () => SwipeBottom(), up: () => SwipeTop() }">
  <v-content>
      ...
  </v-content>
  </v-layout>  
  </v-app>
</template>

ghansham · 2020-05-02T15:34:22Z

Thanks. I will give a try..

…

On Sat, May 2, 2020, 19:07 Libidine ***@***.***> wrote: Which vuetify version and loader version are you using? And any idea about swipeable controls in vuetify? I use: "vuetify": "^2.2.26", "vuetify-loader": "^1.4.3", "vue-cli-plugin-vuetify": "~2.0.5", Swipeable: <v-layout v-touch="{ right: () => SwipeRight(), left: () => SwipeLeft(), down: () => SwipeBottom(), up: () => SwipeTop() }"> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <https://github.com/vuetifyjs/vuetify/issues/8027#issuecomment-622954978>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAYXFJBEOLQOFXSLQYYRL43RPQOYTANCNFSM4IG7JTTA> .

ajslater · 2020-05-10T00:21:02Z

Adding the Touch directive to the Vue.use config wfm.

dannycoulombe · 2020-05-19T14:44:22Z

I confirm that I also have this issue under 2.2.27. Importing Touch from vuetify/lib/directives also didn't worked for me.

manonthemat · 2020-05-25T01:52:47Z

Same problem in 2.2.29.

xahmedtaha · 2020-05-25T20:01:47Z

Same problem in version 2.2.29

This comment has been minimized.

Sign in to view

KaelWD transferred this issue from vuetifyjs/vuetify May 26, 2020

KaelWD self-assigned this May 26, 2020

KaelWD added the bug label May 26, 2020

KaelWD closed this as completed in e353643 May 26, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Bug Report] V-Touch directive is broken in 2.0 #130

[Bug Report] V-Touch directive is broken in 2.0 #130

cmseeling commented Jul 25, 2019

johnleider commented Jul 26, 2019

cmseeling commented Jul 26, 2019

KaelWD commented Jul 26, 2019 •

edited

rounce commented Jul 26, 2019 •

edited

cmseeling commented Jul 26, 2019

libid0nes commented Jul 26, 2019

razorfever commented Jul 28, 2019

struers-mfr commented Aug 9, 2019

mseele commented Aug 28, 2019

TheFrogDaddy commented Oct 8, 2019

jperelli commented Nov 23, 2019

lebesnec commented Nov 25, 2019

lebesnec commented Dec 2, 2019

TimV81 commented Dec 6, 2019

lebesnec commented Dec 6, 2019

TimV81 commented Dec 6, 2019 •

edited

jperelli commented Dec 14, 2019

ghansham commented May 2, 2020

ghansham commented May 2, 2020

libid0nes commented May 2, 2020

ghansham commented May 2, 2020 via email

libid0nes commented May 2, 2020 •

edited

ghansham commented May 2, 2020 via email

ajslater commented May 10, 2020

This comment has been minimized.

This comment has been minimized.

dannycoulombe commented May 19, 2020

manonthemat commented May 25, 2020

xahmedtaha commented May 25, 2020 •

edited

[Bug Report] V-Touch directive is broken in 2.0 #130

[Bug Report] V-Touch directive is broken in 2.0 #130

Comments

cmseeling commented Jul 25, 2019

Environment

Steps to reproduce

Expected Behavior

Actual Behavior

Reproduction Link

johnleider commented Jul 26, 2019

cmseeling commented Jul 26, 2019

KaelWD commented Jul 26, 2019 • edited

rounce commented Jul 26, 2019 • edited

cmseeling commented Jul 26, 2019

libid0nes commented Jul 26, 2019

razorfever commented Jul 28, 2019

struers-mfr commented Aug 9, 2019

mseele commented Aug 28, 2019

TheFrogDaddy commented Oct 8, 2019

jperelli commented Nov 23, 2019

lebesnec commented Nov 25, 2019

lebesnec commented Dec 2, 2019

TimV81 commented Dec 6, 2019

lebesnec commented Dec 6, 2019

TimV81 commented Dec 6, 2019 • edited

jperelli commented Dec 14, 2019

ghansham commented May 2, 2020

ghansham commented May 2, 2020

libid0nes commented May 2, 2020

ghansham commented May 2, 2020 via email

libid0nes commented May 2, 2020 • edited

ghansham commented May 2, 2020 via email

ajslater commented May 10, 2020

This comment has been minimized.

This comment has been minimized.

dannycoulombe commented May 19, 2020

manonthemat commented May 25, 2020

xahmedtaha commented May 25, 2020 • edited

KaelWD commented Jul 26, 2019 •

edited

rounce commented Jul 26, 2019 •

edited

TimV81 commented Dec 6, 2019 •

edited

libid0nes commented May 2, 2020 •

edited

xahmedtaha commented May 25, 2020 •

edited