[Vuejs]-How can add a button count on my component VueJS

by

0👍

✅

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.

Leave a comment