Vue.js lazy loading

Question

I'm using Laravel mix for compiling my vue.js components. Now I would like to lazy load my components found it here:

https://v2.vuejs.org/v2/guide/components.html#Async-Components

When I try this:

Vue.component('setting', () => import('./components/settings/setting.vue'));

I get:

 error  in ./resources/assets/admin/vue/core.js

Syntax Error: Unexpected token (36:31)

  34 |  */
  35 |
> 36 | Vue.component('setting', () => import('./components/settings/setting.vue'));
     |                                ^

What could be wrong here? When I register the component 'normal' everything is working?

Laravel mix uses webpack behind the scene and for code splitting feature to work you need to use dynamic import. This is from webpack — zeidanbm
– zeidanbm, Commented Nov 15, 2017 at 10:05
@zeidanbm i've got it working now. But how do I set the path where webpack looks for the javascript files? Because right now it's looking for the wrong path. — Jenssen
– Jenssen, Commented Nov 15, 2017 at 10:12

zeidanbm · Accepted Answer · 2017-11-15 14:54:06Z

2

Following from the comments. You need to specify the publicPath. Here's a small version of a working webpack.mix.js file tested on laravel 5.5 with laravel-mix

const { mix } = require('laravel-mix');
mix.setPublicPath('public/');



mix.webpackConfig({
    output: {
      chunkFilename: 'js/[name].[chunkhash].js',
         publicPath: '/'
     },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env'],
              plugins:['babel-plugin-dynamic-import-webpack']
            }
        },

  ]
    }
});


mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();

You probably had your manifest.json producing wrong paths and thus the webpack is not being able to find the correct chunk file paths. So your solution is either to modifiy the paths or just stick with default paths as the example above. The code above should produce app.js inside public/js and as well the chunked files. Also it will produce the manifest.json in public directory Now finally just reference your app.js file in your blade

<script src="{{mix('/js/app.js')}}"></script>

Note that you need to have babel loader and babel dynamic import plugins installed the first is needed to be able to use babel plugins in webpack as i'm not sure if laravel mix reads the .babelrc file and if it does then that should be enough

edited Nov 15, 2017 at 14:54

answered Nov 15, 2017 at 10:24

zeidanbm

5324 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jenssen Over a year ago

thanks it compiles to the correct location now. But when I look into my network tab it's looking for the wrong path. How do I have to configure that?

zeidanbm Over a year ago

I think you are refering to the path specified by your blade? are you producing with webpack, hashed js files?

Jenssen Over a year ago

How and to wat should I refer in my blade file?

zeidanbm Over a year ago

I edited the answer to clarify a couple things. hope this helps.

Collectives™ on Stack Overflow

Vue.js lazy loading

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related