Vue Router Loading Indicator: The Practical Guide

Here are the steps to implement the vue-router loading indicator.

Step 1: Install Vue using vue-cli

npm install -g @vue/cli

# or

yarn global add @vue/cli

Create a project using the following command.

vue create vuerouterprogress

create vue project

Go to your project.

cd vuerouterprogress

Start the development server with the following command.

npm run serve

It will boot up the server at http://localhost:8080/

Open the project in your IDE or Editor.

Step 2: Install vue-router.

Go to the terminal and hit the command.

yarn add vue-router

# or

npm install vue-router --save

Step 3: Configure the routes.

In the src >>  components folder, there is already one component called HelloWorld.vue. Now, create two more components.

Inside the src  >>  components folder, create two vue components.

  1. AboutComponent.vue
  2. ContactComponent.vue
// ContactComponent.vue

<template>
  <p>ContactComponent Works!!</p>
</template>
<script>
export default {
    name: 'ContactComponent'
}
</script>

And another AboutComponent.vue.

// AboutComponent.vue

<template>
  <p>AboutComponent Works!!</p>
</template>
<script>
export default {
    name: 'AboutComponent'
}
</script>

Add the following code to the src  >>  main.js.

// main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'

import HelloWorld from './components/HelloWorld.vue';
import AboutComponent from './components/AboutComponent.vue';
import ContactComponent from './components/ContactComponent.vue';

Vue.config.productionTip = false

Vue.use(VueRouter)

const routes = [
  {
        name: 'Home',
        path: '/',
        component: HelloWorld
  },
  {
      name: 'About',
      path: '/about',
      component: AboutComponent
  },
  {
      name: 'Contact',
      path: '/contact',
      component: ContactComponent
  },
];

const router = new VueRouter({ mode: 'history', routes: routes });

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

Here, first, we have imported all of our components.

Then we defined the array of components with its name and path.

Pass all the config while creating a routing object and attach it to the Vue application.

The next step is to display the proper routes according to their path.

Step 4: Display components according to routes.

Inside App.vue file, replace the following code.

// App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'app'
}
</script>

If your server is stopped or not started yet, start with the following command.

npm run serve

Type the following URL in the browser: http://localhost:8080/contact.

You can see that; we get ContactComponent Works!!

Step 5: Add Bootstrap and navigation.

Go to your terminal and hit the command to add Bootstrap 4.

yarn add bootstrap

# or

npm install --save bootstrap

Import this bootstrap css file inside the main.js file.

// main.js

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'

The next step is to add the Navigation inside the App.vue file.

// App.vue

<template>
  <div id="app" class="container">
    <nav class="navbar navbar-expand-sm bg-light">
      <ul class="navbar-nav">
        <li class="nav-item">
          <router-link :to="{ name: 'Home' }" class="nav-link">Home</router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{ name: 'About' }" class="nav-link">About</router-link>
        </li>
        <li class="nav-item">
          <router-link :to="{ name: 'Contact' }" class="nav-link">Contact</router-link>
        </li>
      </ul>
    </nav>
    <div class="gap">
      <router-view></router-view>
    </div>
  </div>
</template>

<style>
  .gap {
    margin-top: 50px;
  }
</style>

<script>

export default {
  name: 'app'
}
</script>

Save the file and switch to the browser.

Vue Router Loading Indicator Tutorial

Step 6: Install the nprogress library.

yarn add nprogress

# or

npm install nprogress --save

Add its CSS inside a main.js file.

// main.js

import '../node_modules/nprogress/nprogress.css'

To add a hook to the router object. So when we change the route, it starts the progress bar at the top, and when the routing process finishes, we need to stop that progress bar from showing in the header.

// main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import NProgress from 'nprogress';

import HelloWorld from './components/HelloWorld.vue'
import AboutComponent from './components/AboutComponent.vue'
import ContactComponent from './components/ContactComponent.vue'

import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import '../node_modules/nprogress/nprogress.css'

Vue.config.productionTip = false

Vue.use(VueRouter)

const routes = [
  {
        name: 'Home',
        path: '/',
        component: HelloWorld
  },
  {
      name: 'About',
      path: '/about',
      component: AboutComponent
  },
  {
      name: 'Contact',
      path: '/contact',
      component: ContactComponent
  },
];

const router = new VueRouter({ mode: 'history', routes: routes });

router.beforeResolve((to, from, next) => {
  if (to.name) {
      NProgress.start()
  }
  next()
})

router.afterEach((to, from) => {
  NProgress.done()
})

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

Save the file and see the output in the browser.

That’s it for this tutorial.

9 thoughts on “Vue Router Loading Indicator: The Practical Guide”

  1. Wow. Skip right to the end of the article if you don’t want all the unrelated bullshit. Do you really think that if someone is reading this tutorial they need to be shown how to install Vue and then Bootstrap? Logic is hard amiright?

    Reply
    • My articles are not only about the pros. It is also for beginners. IF you don’t like then skip those steps. Do not argue with me, friend.

      Reply
      • Great article, and it´s great that you point to begginers too, that´s why some knows how to teach, and some others knows how to complain.

        Reply
      • Agreed that you should cater to beginners and explan all the steps. ??You _could_ also incorporate at TLDR to jump to bottom or something.

        Reply
  2. Thanks this was helpful. Running into a “className of null” error after switching the NProgress parent and then changing routes . If you ever configure the NProgress selector to another element and you do not reset it back to the “body” it will throw this error – (adding NProgress.configure({ parent: ‘body’}); after the .done will sort this ) – I think it is because the container is destroyed after using the configure method.

    Reply
  3. Thank you for this tutorial! I appreciated seeing your setup process because there is equal or more effort put into configuration and build process as effort put into development of the application itself. Seeing your method of bootstrapping an application was valuable to me.
    I wanted to also mention that the Vue-Router version I am running in my app does not provide the “name” property on the “to” parameter in the beforeResolve method. Maybe I just didn’t name my routes or something has changed, but I worked around by checking for “to.path” instead.
    Cheers!

    Reply
  4. for better user experience I sugest to add this code on “…-leave-active”

    .moveInUp-leave-active{
    position: absolute;
    margin: 0 auto;
    display: block;
    left: 0;
    right: 0;
    z-index: -1;
    animation: moveInUp 1s ease-in;
    }

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.