[Vue] Load components when needed with Vue async components

In large applications, dividing the application into smaller chunks is often times necessary. In this lesson, we will look at how vue loads async components into your application.

 

<template>
  <div>
    <section class="pa2">
      <h2>Lazy loading...</h2>
      <button @click="show = true">Lazy load</button>
      <div v-if="show">
        <Async></Async>
      </div>
    </section>
  </div>
</template>

<script>

  const Async = resolve => {
    console.log('loading...')
    setTimeout(() => {
      require(['~components/async.vue'], resolve)
      console.log('loaded')
    }, 1000)
  }

  export default {
    components: {
      Async
    },
    data () {
      return {
        show: false
      }
    }
  }
</script>