Component Template does not show at first page load

Hi, I am new to this forum and a Vue beginner. Currently I am doing a simple exercise with a component.
The code works in principle. However, the template content does not appear when the page is initially loaded. It becomes visible when I click the button and the id that comes from the parent counts up.

Can anybody explain to me how to display the template of the component right away?

Here a jsfiddle Link for code inspection: https://jsfiddle.net/udjth67e/1/

Hi @drsoong, welcome to the Vue forums!

Thanks for providing the jsfiddle!

You need to register the global component before you use it your main component. Just move the Vue.component('test',{...}) to above the const app = new Vue({...}). Like this: https://jsfiddle.net/sryfneod/1/

The explanation: as soon as your code finishes executing the app = new Vue(...) code, Vue will render the main app but at that point the test component hasn’t been defined so it will render as blank. If you look in the DevTools console you will see this error:
Capture

By the time you click on the button, the test component has been registered so Vue can render it while it’s re-rendering the rest of the app.

Here’s the crucial bit from the guide: https://vuejs.org/v2/guide/components-registration.html#Global-Registration:

Hi @wildhart, Many thanks for the thorough instructions and explanations. Yes, sure a variable can only be used when already initialised. Shame on me.

I guess it’s a bit like the stunned rabbit (me) standing before the great sorcerer (Vue) with its brain paralyzed.

I suspect I will come up with some more questions of this type in the near future.

Many thanks again and greetings from Berlin, Germany.