How to use nprogress with vuejs code splitting? - vuejs2

Question

I'm new in vuejs and I want to use nprogress with vuejs code splitting features. Basically I want nprogress when use navigate to pages. The requirement is show progress until component promise not resolve. How can I add this feature in my app?
Here is my code:
import Vue from 'vue'
import Router from 'vue-router'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css';
// layout components
import Full from '../container/Full'
function asyncComponent(importComponent) {
return importComponent()
Nprogress.start();
importComponent().then(() => {
Nprogress.done();
return importComponent();
})
}
// dashboard components
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Full,
redirect: '/dashboard/dashboard-v1',
children: [
{
path: '/dashboard/dashboard-v1',
component: asyncComponent(() => import('../views/dashboard/DashboardOne')),
meta: {
title: 'Dashboard V1',
breadcrumb: 'Dashboard / Dashboard V1'
}
},
{
path: '/dashboard/dashboard-v2',
component: asyncComponent(() => import('../views/dashboard/DashboardTwo')),
meta: {
title: 'Dashboard V2',
breadcrumb: 'Dashboard / Dashboard V2'
}
}
]
},
{
path: '/session/sign-up',
component: asyncComponent(() => import('../views/SignUp')),
meta: {
title: 'Sign Up',
breadcrumb: 'Session / Sign Up'
}
},
{
path: '/session/login',
component: asyncComponent(() => import('../views/Login')),
meta: {
title: 'Login',
breadcrumb: 'Session / Login'
}
},
{
path: '/session/lock-screen',
component: asyncComponent(() => import('../views/LockScreen')),
meta: {
title: 'Lock Screen',
breadcrumb: 'Session / Lock Screen'
}
}
]
})

Answer 1

NProgress functionality basically work with page routing like, each route changes NProgress loader triggered and it has been written like below,
import Vue from 'vue'
import Router from 'vue-router'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css';
// layout components
import Full from '../container/Full'
function asyncComponent(importComponent) {
return importComponent()
Nprogress.start();
importComponent().then(() => {
Nprogress.done();
return importComponent();
})
}
// dashboard components
Vue.use(Router)
const router = new Router({
routes: [
{
path: '/',
component: Full,
redirect: '/dashboard/dashboard-v1',
children: [
{
path: '/dashboard/dashboard-v1',
component: asyncComponent(() => import('../views/dashboard/DashboardOne')),
meta: {
title: 'Dashboard V1',
breadcrumb: 'Dashboard / Dashboard V1'
}
},
{
path: '/dashboard/dashboard-v2',
component: asyncComponent(() => import('../views/dashboard/DashboardTwo')),
meta: {
title: 'Dashboard V2',
breadcrumb: 'Dashboard / Dashboard V2'
}
}
]
},
{
path: '/session/sign-up',
component: asyncComponent(() => import('../views/SignUp')),
meta: {
title: 'Sign Up',
breadcrumb: 'Session / Sign Up'
}
},
{
path: '/session/login',
component: asyncComponent(() => import('../views/Login')),
meta: {
title: 'Login',
breadcrumb: 'Session / Login'
}
},
{
path: '/session/lock-screen',
component: asyncComponent(() => import('../views/LockScreen')),
meta: {
title: 'Lock Screen',
breadcrumb: 'Session / Lock Screen'
}
}
]
})
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((to, from) => {
// Complete the animation of the route progress bar.
NProgress.done()
})
export default router;
with this, you would have the loader on each route change.