Skip to content

Instantly share code, notes, and snippets.

@pravnkay
Last active November 2, 2024 07:42
Show Gist options
  • Save pravnkay/38c60e036c197254316a3caf78defc4d to your computer and use it in GitHub Desktop.
Save pravnkay/38c60e036c197254316a3caf78defc4d to your computer and use it in GitHub Desktop.
Nprogress - Loading bar for VueJS Router

Installation of Nprogress for VueJS

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
@Getasew21
Copy link

Uncaught SyntaxError: The requested module '/node_modules/nprogress/nprogress.js?v=33fb856e' does not provide an export named 'default' (at index.js:4:8)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment