<div id="app" v-cloak>
  <cat name="my cat">
      <kitten></kitten>
  </cat>
</div>
[v-cloak] {display: none}
Vue.config.productionTip = false;
Vue.config.devtools = false;
/*
Vue.config.errorHandler = function(err, vm, info) {  
  console.log('ERROR', err.toString(), ' and info=', info);  
}
*/
Vue.config.warnHandler = function(msg, vm, trace) {
  console.log('WARN ',msg,' and trace=',trace);
}

Vue.component('cat', {
  template:`
<div><h1>Cat: {{name}}</h1>
  <slot></slot>
</div>`,
  props:{
    name:{
      required:true,
      type:String
    }
  },
   errorCaptured(err,vm,info) {
    console.log(`cat EC: ${err.toString()}\ninfo: ${info}`); 
     return false;
  }

});

Vue.component('kitten', {
  template:'<div><h1>Kitten: {{ dontexist() }}</h1></div>',
  props:{
    name:{
      required:true,
      type:String
    }
  }
});

const app = new Vue({
  el:'#app',
  computed:{
    name2() {
      return x;
    }
  },
  methods:{
    doX() {
      return x;
    }
  },
  renderError (h, err) {
    return h('pre', { style: { color: 'red' }}, err.stack)
  }

})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://unpkg.com/vue@2