Laravel Mix Setup For Vue Async Components

Install Babel Plugin For Dynamic Import Syntax

yarn add -D babel-plugin-syntax-dynamic-import

Create .babelrc

1
2
3
{
"plugins": ["syntax-dynamic-import"]
}

Add Webpack Config in in webpack.mix.js

1
2
3
4
5
6
mix.webpackConfig({
output: {
chunkFilename: 'chunks/[name].[chunkhash].js',
publicPath: '/',
},
});

Replace Your Code

1
2
- Vue.component('example', require('./components/ExampleComponent.vue'))
+ Vue.component('example', () => import('./components/ExampleComponent.vue'))

Ref: