<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)
}
})
This Pen doesn't use any external CSS resources.