Vue 3 support - Githubissues

masterWeber commented 3 years ago

Does not give an error, the console is empty.

"dependencies": {
    "core-js": "^3.7.0",
    "vue": "^3.0.2",
    "vue-router": "^4.0.0-rc.2",
    "vuex": "^4.0.0-rc.1"
  },

consciousnessdev commented 3 years ago

Does not give an error, the console is empty.

"dependencies": {
    "core-js": "^3.7.0",
    "vue": "^3.0.2",
    "vue-router": "^4.0.0-rc.2",
    "vuex": "^4.0.0-rc.1"
  },

Up up still many packages not supported in Vue 3 :disappointed:

jameskirtland3 commented 3 years ago

Those who aren't interested in making their own Vue 3 dragscroll and would rather hack this one into Vue 3, here's how I adapted it to make it Vue 3 compliant:

Do not use main.js. Vue 3 changed how it registers directives, so this will not work until it is updated by the contributer/maintainer.

Vue 3 changed the directive hooks. In directive.js, change the export default to the following:

export default {
  mounted: function (el, binding, vnode) {
    init(el, binding, vnode)
  },
  updated: function (el, binding, vnode, oldVnode) {
    // update the component only if the parameters change
    if (JSON.stringify(binding.value) !== JSON.stringify(binding.oldValue)) {
      init(el, binding, vnode)
    }
  },
  unmounted: function (el, binding, vnode) {
    const target = el
    u.removeEventListeners(target, POINTER_START_EVENTS, target.md)
    u.removeEventListeners(window, POINTER_END_EVENTS, target.mu)
    u.removeEventListeners(window, POINTER_MOVE_EVENTS, target.mm)
  }
}

In utils.js, change line 28: vnode.el.dispatchEvent(event)

Then register your directive using the new convention.

import { dragscroll } from "vue-dragscroll";

const app = createApp({});

app.directive('dragscroll', dragscroll);

I'm only using dragscroll on html elements, not components, so there may be additional changes necessary to accomplish that.

donmbelembe commented 3 years ago

@jameskirtland3 please make a PR

ilearnio commented 2 years ago

@donmbelembe Why is this ticket closed? It is still an issue an nobody created a PR it seems

ilearnio commented 2 years ago

I can confirm that @jameskirtland3's solution works perfectly