AppDividend
Latest Code Tutorials

Vue Router Loading Indicator Tutorial

Vue Router Page Loading Animation Example

2,648

Get real time updates directly on you device, subscribe now.

In this tutorial, I will show you how to add vue router loading indicator, while browsing the different pages in Vue application. When we navigate from one page to another page, then we need to show some progress bar at the top of our application. That indicates our user that we are changing our page. This kind of functionality is used in Single Page Application.

Vue Router Loading Indicator

Let us start our tutorial by installing a Vue.js application.

Step 1: Install Vue using vue-cli

Type the command.

npm install -g @vue/cli
# or
yarn global add @vue/cli

Okay, now 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 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>

Now, 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 have 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.

Next step is to display the proper routes according to its path.

Step 4: Display components according to routes.

Related Posts
1 of 15

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>

Now, if your server is stopped or not started yet then start with the following command.

npm run serve

Now, 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 the Bootstrap 4.

yarn add bootstrap

# or

npm install --save bootstrap

Now, import this bootstrap css file inside the main.js file.

// main.js

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

Next step is to add the Navigation inside 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 nprogress library.

Type the following command to install nprogress.

yarn add nprogress

# or

npm install nprogress --save

Add its CSS inside a main.js file.

// main.js

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

Now, we need 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.
Finally,  Vue Router Loading Indicator Tutorial is over. Thanks for taking Guys.

4 Comments
  1. ffs says

    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?

    1. Krunal says

      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.

  2. Brandon says

    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.

  3. Dylan Baxter says

    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!

Leave A Reply

Your email address will not be published.

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