How to do it…

As stated earlier, I will assume that you have all the code resulting from the Fetching data before switching route recipe in place and working.

For this recipe, we will use an additional dependency--NProgress, a small utility to display a loading bar on top of the screen.

Add the following two lines inside the head of your page or the list of dependencies in JSFiddle (there is also a package for npm):

<link rel="stylesheet" href="https://cdn.bootcss.com/nprogress/X/nprogress.css"><script src="https://cdn.bootcss.com/nprogress/X/nprogress.js"></script>

Here, X is the version of NProgress. At writing time it was 0.2.0, but you can look it up online.

After we've done this, the next step is to define the behavior we want from ...

Get Vue.js 2 Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.