Vue.js Async Components

• Laravel Mix Version: 1.4.5
• Node Version (node -v): 8.5.0
• NPM Version (npm -v): 5.4.2
• OS: macOS High Sierra

Description:

Does anyone know how to get Vue.js async components to work? Getting the following error:

Syntax Error: Unexpected token (10:25)

   8 |     el: '#app',
   9 |     components: {
> 10 |         'example': () => import('./components/Example')
     |                          ^
  11 |     }
  12 | });```

[ankurk91]

@ruchern It is specific to webpack (tooling), after all it is babel who will transform the code and will pass to uglify-js. So it is upto end user to configure and enable modern feature.

@pix2D

Here is the complete tutorial -

⚠️ Updated for Laravel Mix v3+

• Install required babel plugin

npm install --save-dev @babel/plugin-syntax-dynamic-import

• Create .babelrc in your project root, and specify the plugin

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

• Then in your code somewhere -

// resources/js/routes.js
{
          path: 'post/:id(\\d+)',
         // notice the dynamic import
          component: () => import('./components/post/show.vue'),
          name: 'post.show',
          meta: {
            title: 'Show post',
          }
 }

• Build

npm run dev

PS If you want to load components via computed property, read this

• https://alligator.io/vuejs/lazy-loaded-wizard/
• https://alexjover.com/blog/lazy-load-in-vue-using-webpack-s-code-splitting/

[ruchernchong]

components: {
    example: require('./components/Example')
}