How can I use vue Async components?

Question

im using laravel 5.4 and vue 2, and I want to load the async component with a button, and my vue js components are sepurate, for example: 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'
});

and this place to display components

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

How can I use Async components? thank

---

No I think you don't understand me

his registration of my component

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 the request, it is enabled by default (shown) I don’t know how to pass the solution to me and reject the keys to this method on my page when I call the component

Answer 1

vue 2 . . async- :

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')
  }
]
})

:

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

: www.bdtunnel.com .

Answer 2

Vue.js - , , require() . require() :

resolve(require('./components/Example2.vue'))

setTimeout() . 5 Example2 .

/ Example2 , data(). , App.vue, v-if (https://vuejs.org/v2/guide/conditional.html#v-if) / Example2 / DOM. v-show (https://vuejs.org/v2/guide/conditional.html#v-show), . v-if vs v-show : https://vuejs.org/v2/guide/conditional.html#v-if-vs-v-show. - , : https://vuejs.org/v2/examples/modal.html

main.js

import Vue from 'vue'
import App from './components/App.vue'

Vue.component('example2', function(resolve, reject) {
  setTimeout(function() {
    resolve(require('./components/Example2.vue'))
  }, 5000)
})

const app = new Vue({
  el: '#app',
  render: h => h(App)
})

Example2.vue

<template>
  <div>
    <div>Hello example 2!</div>
  </div>
</template>      

App.vue

<template>
  <div id="app">
    <button type="button" @click="onButtonClick">Click me to add the example2 component</button>
    <example2 v-if="show_example2"></example2>
  </div>
</template>

<script>
  export default {
    name: 'app',
    data() {
      return {
        show_example2: false
      }
    },
    methods: {
      onButtonClick() {
        this.show_example2: true
      }
    }
  }
</script>

Answer 3

- example2 :

<template>
  <div>
    <div v-if="inited">
      <div>{{foo}}</div>
      <div>{{bar}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        foo: '',
        bar: '',
        inited: false
      }
    },
    mounted() {
      var me = this
      axios.get('/my/ajax/call').then(function(response) {
        me.foo = response.data.foo
        me.bar = response.data.bar
        me.inited = true
      })
    }
  }
</script>

, , , , AJAX , , Vue . , , inited: false true AJAX, :v-if="inited", :v-show="inited" div, , AJAX.

Answer 4

According to the documentation on VueJs, you can define asynchronous components like this starting from version 2.3

const AsyncComp = () => ({
  // The component to load. Should be a Promise
  component: import('./MyComp.vue'),
  // A component to use while the async component is loading
  loading: LoadingComp,
  // A component to use if the load fails
  error: ErrorComp,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

You can use this in conjunction with the built-in component to dynamically load your components.

EDIT: Updated link to the mentioned documentation .