[Vuejs]-Nuxt loading progress bar loads multiple times

by

6👍

✅

It’s loading three separate times because your requests are taking place sequentially, one after another, not all at once. To get around this, you can manually start/stop the loader.

First, you’ll want to prevent the nuxt axios plugin from triggering the loading bar. See here. 

this.$axios.$get('URL', { progress: false })

Then, you can manually start and stop the loading bar programatically before/after the requests are completed.

this.$nuxt.$loading.start()
this.$nuxt.$loading.stop()

Full example:

async fetch({  store }) {
    this.$nuxt.$loading.start()
    await store.dispatch('LOAD_DATA_1')
    await store.dispatch('LOAD_DATA_2')
    await store.dispatch('LOAD_DATA_3')
    this.$nuxt.$loading.stop()
}

edit 1 (see comment):

To use in asyncData/fetch you can use the following. I’m not sure you should be accessing the components like this, but I don’t see another way to access the $loading module within the context…

async fetch(ctx) {
    // access the loading component via the access context
    ctx.app.components.NuxtLoading.methods.start()

    // example, wait 3 seconds before disabling loader
    await new Promise(resolve => setTimeout(resolve, 3000))

    ctx.app.components.NuxtLoading.methods.finish()
},
👤Jake

Leave a comment