VueJS Lazy Loading routes

Posted 8 years ago - updated 8 years ago vuejs

Instead of loading components on boot up...

 '/home': {
        name: 'HomePage',
        auth: true,
        component: require('./components/pages/HomePage')
    },

... it is possible to LazyLoad

Using webpack

 '/home': {
        name: 'HomePage',
        auth: true,
        component: function (resolve) {
            require(['./components/pages/HomePage'], resolve)
        }
    },

Create a reusable function

    const lazyLoading = (path, ext = '.vue') => {
        return (resolve) => {
            require([`${path}${ext}`], resolve)
        }
    }

    ...

 '/home': {
        name: 'HomePage',
        auth: true,
        component: lazyLoading('./components/pages/HomePage')
    },