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.