Basic VueJs Component

Defining and using a component - http://coligo.io

HTML

<script src="https://unpkg.com/[email protected]"></script>
<div id="app">
  RenderSwitch: {{ renderSwitch }}
  <template v-if='renderSwitch'>
    <comp-a></comp-a>  
  </template>
  <comp-b @rendered='renderSwitchSet'></comp-b>
</div>

JavaScript

Vue.component('comp-a', {
  template: '<h1>Hello World!</h1>'
});

Vue.component('comp-b', {
  template: '<h1>Hello!</h1>',
  mounted () {
    setTimeout(() => {
	    this.$emit('rendered', true)    
    }, 2000)
  }
});


// create a new Vue instance and mount it to our div element above with the id of app
var vm = new Vue({
  el: '#app',
  data () {
  	return {
    	renderSwitch: false
    }
  },
  methods: {
  	renderSwitchSet () {
    	this.renderSwitch = true
    }
  }
});