How to use nprogress with vuejs code splitting?

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'
      }
    }
  ]
})

I think Nprogress functionality should be done in Vue Router's [Navigation Guards](https://router.vuejs.org/en/advanced/navigation-guards.html). Namely beforeEach , afterEach . — Jacob Goh, May 07 '18 at 07:47

score 6 · Answer 1 · edited Apr 03 '20 at 12:05

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.

@anselal: if you believe some code is wrong, either in a question or an answer, it may be best for you to comment. Changing code that is "wrong" can be risky, since it can make it harder for readers to know where the problem is/was. — halfer, Apr 03 '20 at 11:42

How to use nprogress with vuejs code splitting?

1 Answers1