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'
}
}
]
})
NProgress functionality basically work with page routing like, each route changes NProgress loader triggered and it has been written like below,
with this, you would have the loader on each route change.