Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Single Page Applications Chapter 15

}

}

}).then(response => {

NProgress.done()

next(vm => {

vm.name = response.data.name

vm.phone = response.data.phone

})

})

}

You can now launch the application and your progress bar should already work:

How it works...

This recipe also demonstrates that it is not at all difficult to leverage external libraries,
provided they are easy to install.

Since the NProgress component is so simple and useful, I report its API as a reference

here:

NProgress.start(): Shows the progress bar

NProgress.set(0.4): Sets a percentage of the progress bar

NProgress.inc(): Increments the progress bar by a little

NProgress.done(): Completes the progress

We have used two of the preceding functions.

As a precaution, I would also suggest not relying on the done() function being called by

the individual components. We are calling it in the then function, but what if the next

developer forgets? After all, we are starting the progress bar before any switch in route.