How can add a button count on my component VueJS - laravel

Question

i starting learn VueJS and i can't add my button count on my component, i'm work with laravel !
My app.js:
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/HomeComponent.vue'
import Categorie from './components/CategorieComponent.vue'
let routes = [
{
path: '/',
component: Home
},
];
const app = new Vue({
mode: 'history',
el: '#app',
router: router,
data: {
message: 'Hello Vue'
}
});
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
});
My HomeComponent.vue:
<template>
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card-body">
<h1 class="card-tite">Bienvenue sur mon site</h1>
<button-counter></button-counter>
</div>
</div>
</div>
</div>
</template>
I add a div "app" and on this i add a <router-view><router-view> :)
My console VueJS say me :
Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Answer 1

As told in the error message, you have to register your component, before using it. Have a look on this article to read more about it.
In your example, you have to move the Vue.component('button-counter', { ... }) part in from of your app initialize. It is just another component (similar to your HomeComponent) that is defined.
Change your app.js like this:
window.Vue = require('vue');
import VueRouter from 'vue-router';
Vue.use(VueRouter);
import Home from './components/HomeComponent.vue'
import Categorie from './components/CategorieComponent.vue'
let routes = [
{
path: '/',
component: Home
},
];
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">Vous m\'avez cliqué {{ count }} fois.</button>'
});
const app = new Vue({
mode: 'history',
el: '#app',
router: router,
data: {
message: 'Hello Vue'
}
});
... and your example should work properly.
Have a look at this running fiddle with your example.