Vue 3 support

[akhabali]

It's will be great if a Vue 3 compatible version is provided.

Tried the version 1.0.1 on Vue 3 and got

runtime-core.esm-bundler.js?5c40:218 Uncaught TypeError: Cannot read property '_c' of undefined
    at Proxy.__vue_render__ (vue-roundslider.esm.js?a824:406)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1167)
    at componentEffect (runtime-core.esm-bundler.js?5c40:5220)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5173)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5132)
    at processComponent (runtime-core.esm-bundler.js?5c40:5090)
    at patch (runtime-core.esm-bundler.js?5c40:4684)
    at mountChildren (runtime-core.esm-bundler.js?5c40:4880)

[soundar24]

@akhabali great, I didn't notice this.. Can you please share a CodeSandbox demo to reproduce this issue, which might be helpful for me and saves my time.. thanks

[soundar24]

Cool.. I just created a demo by myself, hope this is the issue you are facing..

https://codesandbox.io/s/vue-round-slider-issue-with-vue3-ntyfx

[akhabali]

Yes, it's the exact same issue

[wonyongHwang]

I found a temporary work-around solution at vue3.
I've tested this on quasar framework and worked well.

1. modify import source
   before : import RoundSlider from "vue-round-slider"
   after : import { RoundSlider } from "vue-round-slider/src/index2.js"

2. create index2.js which located in (node_modules/vue-round-slider/src/)

        import RoundSlider from "./round-slider.vue";
        
        // Install the components
        export function install(Vue) {
          Vue.component("round-slider", RoundSlider);
        }
        
        // Expose the components
        export { RoundSlider };
        
        /* -- Plugin definition & Auto-install -- */
        /* You shouldn't have to modify the code below */
        
        // Plugin
        const plugin = { install };
        
        export default plugin;
        
        // Auto-install
        let GlobalVue = null;
        if (typeof window !== "undefined") {
          GlobalVue = window.Vue;
        } else if (typeof global !== "undefined") {
          GlobalVue = global.Vue;
        }
        if (GlobalVue) {
          GlobalVue.use(plugin);
        }
   

3. download compiled css file to node_modules/vue-round-slider/src/
   curl -O https://cdn.jsdelivr.net/npm/round-slider@1.6.1/dist/roundslider.min.css

4. modify css source of round-slider.vue at node_modules/vue-round-slider/src/
   before : <style src='../node_modules/round-slider/dist/roundslider.min.css'></style>
   after : <style src='./roundslider.min.css'></style>

I hope it works well for you

In addition, after applying above guide,
It may not be working v-model in <round-slider> when you get the value of controller.
In that case, you can use v-on event as below example.

at template section:
<round-slider v-bind:change="chgHandler" v-on:input="pInput" v-model="sliderValue" min=31.5 max=41.5 step=0.1 start-angle=20 end-angle=160 ></round-slider>

at method section:

pInput(value){
      console.log("value>>>",value)
    }

[abbjetmus]

@wonyongHwang Thank you for the tip this workaround works well in Quasar!

[kalwinskidawid]

@soundar24 Are you going to upgrade it to Vue3 or rather not ?

[soundar24]

@kalwinskidawid I had a look on this, seems the bundling of Vue2 and Vue3 are different so that it won't support on each other versions. The way to handle this is to keep separate repo, or handling in the similar way of vue-demi.

I will check more on this and update in this thread.

[kalwinskidawid]

Awesome, thanks @soundar24!

[kalwinskidawid]

@soundar24 Any good news? :)

[ryntap-vujbu6-wUqxyp]

@soundar24 Is there a plan compatible with vue3?

[xalteropsx]

@wonyongHwang

Uncaught SyntaxError: The requested module '/node_modules/jquery/dist/jquery.js?v=7ea41283' does not provide an export named 'default' (at round-slider.vue:6:8)

[Artem9989]

@wonyongHwang

Uncaught SyntaxError: The requested module '/node_modules/jquery/dist/jquery.js?v=7ea41283' does not provide an export named 'default' (at round-slider.vue:6:8)

Try to use https://www.npmjs.com/package/vue-three-round-slider , I wanted to create for vue 3 based on this slider while the task is in progress, but you can already use it, only you will have to import like this import RoundSlider from vue-three-round-slider
I'm still just learning to write my components, if I succeed, I will definitely let you know

[xalteropsx]

@Artem9989 thank u very very much awesome i wonder what is this for https://refreshless.com/nouislider/

[Artem9989]

@Artem9989 thank u very very much awesome i wonder what is this for https://refreshless.com/nouislider/

Sorry, I haven't seen this before

[Artem9989]

@Artem9989 thank u very very much awesome i wonder what is this for https://refreshless.com/nouislider/

I fixed the component, now it can be imported by the standard import RoundSlider from vue-three-round-slider

[Artem9989]

@xalteropsx , @wonyongHwang , @ryntap-vujbu6-wUqxyp , @kalwinskidawid @abbjetmus , @akhabali
Hello everyone, I have good news, now you can use the package for Vue 3: npm i vue-three-round-slider
You can watch the demo on codesandbox: https://codesandbox.io/s/demo-vue-three-round-slider-yl2ssp
Now all v-model should not cause problems, thank you for your attention.
https://www.npmjs.com/package/vue-three-round-slider

[Artem9989]

I removed the binding to my name, because I'm just learning, I had a few problems to figure out how to do it)

[xalteropsx]

its fine great work @Artem9989 may god bless u

[wonyongHwang]

@Artem9989 That's very good news. Great Works! Thanks a lot~

[StormerZSha]

@Artem9989 that's great,thank u