Install nprogress.
npm install nprogress --save
Add its CSS
main.js
import '../node_modules/nprogress/nprogress.css'
Follow the router.js file above for Router.
import Vue from 'vue' | |
import VueRouter from 'vue-router' | |
import NProgress from 'nprogress'; | |
import Home from '../views/Home.vue' | |
Vue.use(VueRouter) | |
const routes = [ | |
{ | |
path: '/', | |
name: 'home', | |
component: Home, | |
meta: { | |
requiresGuest: true | |
} | |
}, | |
] | |
const router = new VueRouter({ | |
mode: 'history', | |
base: process.env.BASE_URL, | |
routes | |
}) | |
router.beforeResolve((to, from, next) => { | |
// If this isn't an initial page load. | |
if (to.name) { | |
// Start the route progress bar. | |
NProgress.start() | |
} | |
next() | |
}) | |
router.afterEach(() => { | |
// Complete the animation of the route progress bar. | |
NProgress.done() | |
}) | |
export default router |
Uncaught SyntaxError: The requested module '/node_modules/nprogress/nprogress.js?v=33fb856e' does not provide an export named 'default' (at index.js:4:8)