Vue.js 2.0 Lazy Loading

Question

I'm trying to Lazy Load my components in Vue.js 2.0 (in a Laravel 5.3 project).

According to the documentation I should do it like this:

Vue.use(VueRouter);

const Forum = resolve => require(['./Components/Forum/Forum.vue'], resolve);

export default new VueRouter({
    mode: 'history',
    routes: [

        /**
         * Forum
         */

        {
            name: 'Forum',
            path: '/forum',
            component: Forum,
            meta: { requiresAuth: true }
        }
    ]
});

But I get lots of errors:

Uncaught SyntaxError: Unexpected token <
app.js:130 Error: Loading chunk 0 failed.
    at HTMLScriptElement.onScriptComplete (app.js:84)
__webpack_require__.oe @ app.js:130
vue-router.common.js?37ec:80 [vue-router] Failed to resolve async component default: Error: Loading chunk 0 failed.

I'm using Laravel Elixir this is my gulp file:

elixir(mix => {
    mix.webpack('app.js')
        .styles([
            './node_modules/normalize-css/normalize.css',
            './node_modules/nprogress/nprogress.css',
            './node_modules/sweetalert/dist/sweetalert.css'
            ])
        .stylus('app.styl');
});

What am I doing wrong?

Would really help me.

Answer 1

Laravel Elixir does not support Lazy Loading of Vue Components. You have to upgrade to 5.4 where you will get webpack support or you have to use vue-webpack template to build your bundle.