Is there any way i can use ion-progress-bar with vue router

Ionic Framework Ionic Vue
1

So in my current project my vuex and router are all tangled up and none of the components make any single call to my vuex store not even for getters is there any way that I can use ion-progress-bar from the router life cycle.

Something like nprogress package where I can start the progress bar at

router.beforeEach((to,from,next)=>{
NProgress.start()
next()
})

then go to individual route to configure a beforeEnter()

{
path:'someroute',
name:'some-route',
component:'SomeComponent',
beforeEnter((to,from,next)=>{
      store.dispatch('event/action').then(()=>{
          next();
        })
 })
}

Finally, stop the progress bar using

router.afterEach(()=>{
NProgress.done()
})

How can i use ion-progress-bar in such a case if I want to?

2

@nvispute, I just watched ion progress bar and realize the docs don’t say any about the EventLisenter.

So I guess maybe we are able to use onIonViewDidEnter or onMounted to call progressBar once.
In my case, I’d set loading = true even mount specific page and the first call progress bar by setting loading = true.

After Mounted completed. I am setting loading return to false and then end progress bar.

I guess code should be like this:

<ion-progress-bar v-if="loading" color="primary" value="0.5"></ion-progress-bar>
<div v-else-if="!loading">Content ... </div>

JS code

const loading = ref<boolean>(true)
onMounted(async () => {
    await store.dispatch('event/action');
    return loading = false
})

return { loading }
1 Like
3

I tried You way But the issue I face is that Ion-progress is only visible or hidden, it is unable to understand approximation of how the left is completed or remaining.

Here is an example that I am following, as it accurately shows what I am looking for, but wish to implement it with Ion-Progressbar instead of the NProgress package…

-----EDIT 1----
I Went digging into the NPackage for how it manages the auto-progress updated as I wanted to compare those thing with Ion-progress bar properties that I could use for getting similar behavior, and here is what I found

trickle

Turn off the automatic incrementing behavior by setting this to false . (default: true )

There is no such property in Ion-Progress-bar to work with, however, I could use

trickleRate & trickleSpeed

You can adjust the trickleRate (how much to increase per trickle) and trickleSpeed (how often to trickle, in ms).
Ion-Progress-bar provides you with values and buffer to mimic the trickleRate and Speed.

1 Like
4

wow, I think that will improve my project. Thanks a lot.

5

Yes I know NProgress has a nice way when compared with vanilla Ion-Progress-bar, the way it is integrated with vue router it looks near perfect…