Vue Async Component

by Raj Shekhar

HTML

<div id="app">
  <transition name="fade" mode="out-in">
    <async-component></async-component>
  </transition>
</div>

<template id="number-box">
  <h1>123123</h1>
</template>

<template id="loading-component">
  <h1>Loading...</h1>
</template>

<template id="error-component">
  <h1>Something Wrong!!</h1>
</template>

CSS

.fade-enter-active, .fade-leave-active {
  transition: opacity .5s
}
.fade-enter, .fade-leave-to /* .fade-leave-active in <2.1.8 */ {
  opacity: 0
}

Babel + JSX

const NumberBoxComponent = {
	name: 'number-box',
	template: '#number-box',
}

const LoadingComponent = {
	name: 'loading-component',
	template: '#loading-component'
}

const ErrorComponent = {
	name: 'error-component',
	template: '#error-component'
}

const AsyncComponent = () => ({
	component: new Promise((resolve, reject) => {
		setTimeout(() => {
	  	resolve(NumberBoxComponent)
		}, 1000)
  }),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 1
})

new Vue({
	el: '#app',
  components: {
  	'async-component': AsyncComponent
	}
})