Vue 3 support - Githubissues

akhabali commented 3 years ago

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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

Yes, it's the exact same issue

wonyongHwang commented 3 years ago

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

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

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);
    }

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
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 commented 2 years ago

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

kalwinskidawid commented 2 years ago

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

soundar24 commented 2 years ago

@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 commented 2 years ago

Awesome, thanks @soundar24!

kalwinskidawid commented 1 year ago

@soundar24 Any good news? :)

ryntap-vujbu6-wUqxyp commented 1 year ago

@soundar24 Is there a plan compatible with vue3?

xalteropsx commented 1 year ago

@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)