Vue 3 support

[stevebauman]

Hi there! First of all -- thanks so much for building and open sourcing this awesome package. ❤️

I was wondering if Vue 3 support may be in the works? Really enjoy using this package and I don't want to have to give it up to upgrade. 😢

Is there anything you may need help with to get the compatibility process underway?

[noogen]

Is there a problem of it not working in Vue3? I thought Vue2 component works in Vue3 so wouldn't keep it as is work better?

[stevebauman]

Is there a problem of it not working in Vue3? I thought Vue2 component works in Vue3 so wouldn't keep it as is work better?

Oh I don't think there's a problem with it working in Vue 3 -- but I'm not able to upgrade to Vue 3 due to this packages package.json file requiring Vue 2:

Unless there's a way around this requirement that you may know of?

[noogen]

The error seem like it have a problem with vue@^2.6.12 as peer dev. I removed it from peer dependencies in 1.5.0, please try and let me know if it work. Thanks.

[stevebauman]

Ok great -- I was able to update to Vue 3, but I do receive warnings, and then an error. Here's my console output:

[Vue warn]: `beforeDestroy` has been renamed to `beforeUnmount`. 
[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance. 
[Vue warn]: Property "_self" was accessed during render but is not defined on instance. 
index.js?a129:946 Uncaught (in promise) TypeError: Cannot read property '_c' of undefined
    at Proxy.render (index.js?a129:946)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:846)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4280)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:4263)
    at mountComponent (runtime-core.esm-bundler.js?5c40:4222)
    at processComponent (runtime-core.esm-bundler.js?5c40:4182)
    at patch (runtime-core.esm-bundler.js?5c40:3791)
    at componentEffect (runtime-core.esm-bundler.js?5c40:4298)

I copied your component locally in my project, and here is what I needed to change for compatibility:

https://gist.github.com/stevebauman/0f9f75bb6a4b80dd4a0b900b63173f92/revisions

[stevebauman]

Also -- is there a reason for using const that = this everywhere? I've removed all of those declarations everywhere and replaced them with simply this and it works fine. Wanted to get your thoughts on if there was a purpose.

[noogen]

I replace beforeDestroy for pure element removal event. const that = this is important. It is use to save the correct outside this context when use inside of event handlers. I do it everywhere so I kept it for consistency.

[stevebauman]

It is use to save the correct outside this context when use inside of event handlers

Ah okay understood. Couldn't you use ES6 arrow functions so the this context is automatically passed? Ex.

Before:

jq('input', this.footer()).on('keyup change clear search', function () {
    if (that.search() !== this.value) {
        that.search(this.value).draw();
    }
});

After:

jq('input', this.footer()).on('keyup change clear search', (e) => {
    if (this.search() !== e.target.value) {
        this.search(e.target.value).draw();
     }
});

Not complaining or anything (really appreciate the work you've done) -- just curious on your implementation is all. 👍

[kamilinho20]

Also for me it doesn't work on vue 3. Uncaught TypeError: "merge" is read-only

Maybe I'm doing something wrong. Please provide the simplest possible example on vue 3.

[sametsafak]

When I try to use this package with vue 3, it directly gives an error about $scopedSlots. I checked and see that scopedSlots are deprecated :(

[noogen]

@sametsafak Thanks for posting your error. This gave me a hint on why it is broken. I've updated the component to support Vue 3 and tag new release to version 2.0.0. Also updated the project and examples to Vue 3. Let me know if you have any other issue.

[ckujawa]

Hi! I appreciate the work you're doing on this project! I too am getting the error "This dependency was not found: Vue in ./node_modules/vue-datatables-net/dist/index.js" when trying to build my project with the library. I'm using Vue 3 (^3.2.31 and vue-loader ^17.0.0) and vue-datatables-net ^2.0.0 which I'm pulling from NPM. When I look into the idex.js file npm complains about I see this:

• module?module.exports=e(require("Vue")) which is I'm guessing why I am seeing the error? I tried pulling the project and compiling with vuecli also, but that doesn't work either :).

Any suggestions on what I might be missing?

[noogen]

@ckujawa I'm not sure what the issue is but from what you commented above, are you missing reference of <script src="https://cdn.jsdelivr.net/npm/vue@next/dist/vue.global.js"></script>?

Though, I did found a different or similar issue in compiling vue3 project with laravel-mix so I updated the project to compile with vite. Please try version 2.0.1

[ckujawa]

That worked much better. Thank you! I didn't even consider using Vite...I'm just starting to learn Vue 3 :).

[noogen]

Yep, to develop Vue with Typescript, Vite is suggested right on vuejs own site here: https://vuejs.org/guide/typescript/overview.html