Progress bar with axios interceptors

Author: Gregg

package-lock.json

@@ -10,6 +10,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "lodash": "^4.17.11",
+    "nprogress": "^0.2.0",
     "vue": "^2.5.17",
     "vue-router": "^3.0.1",
     "vuejs-datepicker": "^1.5.3",

package.json

@@ -5,6 +5,7 @@ import App from './App.vue'
 import router from './router'
 import store from './store/store'
 import BaseIcon from '@/components/BaseIcon'
+import 'nprogress/nprogress.css'
 
 Vue.component('BaseIcon', BaseIcon)
 

src/main.js

@@ -1,4 +1,5 @@
 import axios from 'axios'
+import NProgress from 'nprogress'
 
 const apiClient = axios.create({
   baseURL: `http://localhost:3000`,
@@ -9,6 +10,16 @@ const apiClient = axios.create({
   }
 })
 
+apiClient.interceptors.request.use(config => {
+  NProgress.start()
+  return config
+})
+
+apiClient.interceptors.response.use(response => {
+  NProgress.done()
+  return response
+})
+
 export default {
   getEvents(perPage, page) {
     return apiClient.get('/events?_limit=' + perPage + '&_page=' + page)