Vue.draggable: Vue 3 compatibility

[lorenzki]

We are using Vue.Draggable in our project and we want to switch to Vue 3 as soon as it is available.

Are there any plans of maintaining this project and updating it for Vue 3 if necessary?

Thanks for any help / answers!

[David-Desmaisons]

Hello,
I will update to Vue 3. Not sure yet when I will start.
Is there any visibility when it will be released?

[lorenzki]

That's cool to hear!
And thanks for the awesome work btw.

Vue 3 currently is in beta state - and the original plans have been to release it in Q2 2020, which is almost over now.
But we think it could still be released later in the summer or at the beginning of autumn.

https://github.com/vuejs/vue-next

For the most part Vue 3 should be backwards compatible, so maybe your projects still work out of the box.

[mariusa]

Note, this is just about being usable, not porting the component to Vue 3 composition APIs.

[lorenzki]

update: https://github.com/vuejs/rfcs/issues/183

As of now, Vue 3 release is planned for early August.

[brainformatik]

Hey there,

first of all thanks for this amazing project. SortableJS is really great and provides a lot of features. With this repo it is very simple to use it in combination with VueJS.

Because Vue 3 is RC now so the API should not change anymore, I thought I give it a try and make Vue.Draggable work with latest version.

This is my first commit: https://github.com/brainformatik/Vue.Draggable/commit/8d6a813b0ddeeaec2841208f4e03e409ef544b16

Haven't really tested anything yet, just wanted to get a basic version working.

As far as I found out, there are just a few things I had to change for this (no guarantee for 100% working solution though):

• The render method doesn't receive the h function anymore so it has to be imported from Vue.
• Slot behavior changed from a property to a function so it must be called to get the actual slot content
• $scopedSlots was removed so I replaced it with $slots as mentioned in the migration guide
• The behavior of $attrs has changed so I had to filter the class attribute, otherwise it won't be set on the rendered HTML element. There may be other attributes that need filtering as well.

Hope this helps a little bit for the migration process of this great project! Keep up the great work.

[anish2690]

hey, guys, check this vue draggable with vue 3 support

https://www.npmjs.com/package/vue-draggable-next

based on the same vue.draggable and sortable js project

Things which Works
1) Basic drag and drop
2) Transition Group animations
3) Nested Drag and Drop
4) v-model / vuex support

I think most of the people required basic features that I have covered, more advanced features like header/footer slots, and keeping vue component as a tag which not supported for this time.

[MaybeQHL]

@anish2690
When a tag is a component, it does not work
issue: https://github.com/vuejs/vue-next/issues/1927
resolved:

render() {
    const slots = this.$slots.default ? this.$slots.default() : null;
    if (!slots) return h(this.tag, []);
    this.transitionMode = isTransition(slots);
    // https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes
    // const comp = resolveComponent('some-global-comp')
    const compoent: any = resolveComponent(this.tag);
    return h(compoent, this.$attrs, slots);
  }

[anish2690]

@MaybeQHL yes it works but it will create lots of warning for normal use cases.

[MaybeQHL]

@anish2690

This is what I did:

 render() {
    const slots = this.$slots.default ? this.$slots.default() : null;
    if (!slots) return h(this.tag, []);
    this.transitionMode = isTransition(slots);
    // Fixed a bug where the component could not be resolved properly
    // https://github.com/vuejs/rfcs/blob/master/active-rfcs/0008-render-function-api-change.md#context-free-vnodes
    // const comp = resolveComponent('some-global-comp')
    const compoent: any = resolveComponent(this.tag);
    // https://v3.vuejs.org/guide/render-function.html#render-functions
    // props/attributes
    return h(
      compoent,
      { ...this.componentData.props, ...this.componentData.attrs }, // Fixed props and attrs not being passed into the component properly here
      () => slots
    );
  },

[anish2690]

@MaybeQHL but vue still trigger warning for renderingComponent() there no other way to differentiate HTML Node.ELEMENT_NODE with vue component.
https://github.com/vuejs/vue-next/issues/1927#issuecomment-683277068

feel free to create a pull request to https://github.com/anish2690/vue-draggable-next

WIP - Resolve-component
https://github.com/anish2690/vue-draggable-next/tree/feat/resolve-component

[anish2690]

@MaybeQHL add support for rendering vue component as draggable https://github.com/anish2690/vue-draggable-next#component

[syuilo]

Vue3 has been released, but this plugin doesn't seem to work.

[David-Desmaisons]

For now on, I will use issue #942 to check progress on vue 3 compatibility

[David-Desmaisons]

Vue 3 support is now provided by vue.draggable.next https://github.com/SortableJS/vue.draggable.next