JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<div id="app">
  <async-component></async-component>
</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>

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)     
		}, 500)
  }),
  loading: LoadingComponent,
  error: ErrorComponent,
  delay: 1
})

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