Doesn't work at all.

[talaing]

Main.js:

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueProgressBar from "@aacassandra/vue3-progressbar";

const options = {
  color: "#bffaf3",
  failedColor: "#874b4b",
  thickness: "5px",
  transition: {
    speed: "0.2s",
    opacity: "0.6s",
    termination: 300,
  },
  autoRevert: true,
  location: "left",
  inverse: false,
};

createApp(App).use(VueProgressBar, options).use(router).mount('#app')

App.vue:

<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <router-view/>
    <vue-progress-bar></vue-progress-bar>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

Error:

Uncaught TypeError: Cannot read property 'options' of undefined
    at eval (vue3-progressbar.common.js?b60c:253)
    at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?ff79:42)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?ff79:877)
    at unref (reactivity.esm-bundler.js?a1e9:791)
    at Object.get (reactivity.esm-bundler.js?a1e9:794)
    at Proxy.render (vue3-progressbar.common.js?b60c:220)
    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)

[jetzemeilink]

Have you tried first doing: Vue.use(VueProgressBar, options) and then mounting the app?

[talaing]

I'm not sure if Vue.use() is still available in Vue3 Please check this link.

[talaing]

@aacassandra Could you help me with this, please?

[aacassandra]

Thank you @jetzemeilink, for taking the time to help answer.

Hey @talaing , sorry for late answer. you can follow example project how use this in vue3 project. https://github.com/aacassandra/vue3-progressbar-example

I hope this can help many people.

[aacassandra]

I think this is resolved. looks like it's not a plugin problem. let me know if there is any problem

[talaing]

Unfortunately, still the same issue.

runtime-core.esm-bundler.js?5c40:218 Uncaught TypeError: Cannot read property 'options' of undefined
    at eval (vue3-progressbar.common.js?b60c:253)
    at ComputedRefImpl.reactiveEffect [as effect] (reactivity.esm-bundler.js?ff79:42)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js?ff79:877)
    at unref (reactivity.esm-bundler.js?a1e9:791)
    at Object.get (reactivity.esm-bundler.js?a1e9:794)
    at Proxy.render (vue3-progressbar.common.js?b60c:220)
    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)

[talaing]

Only when I cloned the example repo it worked. No idea why.

[talaing]

Of course it still doesn't work when I create a new project, so I still need help with this.

[aacassandra]

can you share your repo in here? maybe we can help you. or you can see many people how using this in their repo https://github.com/aacassandra/vue3-progressbar/network/dependents?package_id=UGFja2FnZS0xNjc3NTg1NTU1

[talaing]

There you go: https://github.com/talaing/progressbar-test

[aacassandra]

There you go: https://github.com/talaing/progressbar-test

no problem. works well. looks like it's not a plugin problem

[talaing]

I think I know what's the problem. How can I install the module locally? When I deleted the @aacassandra/vue3-progressbar from vue3-progressbar-example-master\node_modules it automatically switched to my global installation in C:\Users\Leon\node_modules\@aacassandra\vue3-progressbar and then the same error occured.

[talaing]

I figured it out, I installed the module locally in my project and now it works perfectly. Thank you for your help.

[aacassandra]

you're welcome

[RihanArfan]

I figured it out, I installed the module locally in my project and now it works perfectly. Thank you for your help.

Could you provide steps on how you did this, please? I'm running into the same issue.

vue3-progressbar.vue:33 Uncaught (in promise) TypeError: Cannot read property 'options' of undefined
    at ReactiveEffect.fn (vue3-progressbar.vue:33)
    at ReactiveEffect.run (reactivity.esm-bundler.js:160)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:1088)
    at unref (reactivity.esm-bundler.js:790)
    at Object.get (reactivity.esm-bundler.js:793)
    at Proxy.render2 (vue3-progressbar.vue:2)
    at renderComponentRoot (runtime-core.esm-bundler.js:1168)
    at componentEffect (runtime-core.esm-bundler.js:5214)
    at reactiveEffect (reactivity.esm-bundler.js:42)
    at effect (reactivity.esm-bundler.js:17)

[magicwenli]

I figured it out, I installed the module locally in my project and now it works perfectly. Thank you for your help.

Could you provide steps on how you did this, please? I'm running into the same issue.

vue3-progressbar.vue:33 Uncaught (in promise) TypeError: Cannot read property 'options' of undefined
    at ReactiveEffect.fn (vue3-progressbar.vue:33)
    at ReactiveEffect.run (reactivity.esm-bundler.js:160)
    at ComputedRefImpl.get value [as value] (reactivity.esm-bundler.js:1088)
    at unref (reactivity.esm-bundler.js:790)
    at Object.get (reactivity.esm-bundler.js:793)
    at Proxy.render2 (vue3-progressbar.vue:2)
    at renderComponentRoot (runtime-core.esm-bundler.js:1168)
    at componentEffect (runtime-core.esm-bundler.js:5214)
    at reactiveEffect (reactivity.esm-bundler.js:42)
    at effect (reactivity.esm-bundler.js:17)

I also encountered the same problem, which was solved by introducing vue3-progressbar locally.

step:

1. Copy index.js and vue3-progressbar.vue in the src folder to your local destination. For example ./components/vue3-progressbar/
2. import at main.js.

   import VueProgressBar from "./components/vue3-progressbar";

[martinszeltins]

I was having the same problem and this is what helped me. Add this to vite.config.ts in resolve.alias section:

export default defineConfig(() => {
    return {
        resolve: {
            alias: {
                'vue': 'vue/dist/vue.esm-bundler.js',
            },
        },
})