How can i use Vue Async components?

Question

I'm using laravel 5.4 and vue 2 and I want to load a component as async using a button. My Vue js components are separate: example.vue and test.vue and I load them as an html tag.

This is my app.js:

import './bootstrap';
import example from './components/Example.vue';

Vue.component('example', example);

const app = new Vue({
el: '#app'
});

This is the place to show components

    <How can i use Async components?div id="app">
         <example2></example2> 
    </div>

How can I use Async components?

---

No, I think you don't understand me. It's my component registration

import './bootstrap';
import example from './components/Example.vue';

Vue.component('example', example);

Vue.component('example2', function (resolve) {

require(['./components/Example2.vue'],resolve)

})


const app = new Vue({
el: '#app'
});

and in require , it default resolved (as showing) I don't know how should I pass the resolve and reject keys to this method in my page when I call the component.

Answer 1

You can use async component in vue 2 with a styling way. Proper using async component can reduce your project loading time. You can use async component as like:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router ({
routes: [
  {
    path: '/',
    name:'LandingPage'
    component: () => import('@/containers/LandingPage.vue')
  },
  {
    path: '/login',
    name:'LoginPage'
    component: () => import('@/containers/LoginPage.vue')
  }
]
})

This structure looks better for component loading inside the template:

new Vue ({
  el: 'app',
    components: {
      AsyncComponent: () => import ('./AsyncComponent.vue')
    }
})

You can check out: www.bdtunnel.com for more information.