Progress Bar

We're going to use nprogress to create a progress bar for our application.

Installation

Install the package:

npm install nprogress

and use it inside our router file:

src/router/index.js

...
import NProgress from 'nprogress'

const routes = [
  ...
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

router.beforeEach(() => {
  NProgress.start()
})

router.afterEach(() => {
  NProgress.done()
})

export default router;