title: Vue & Laravel: Access and use eventHub
body: <p>In resources/assets/js/<strong>app.js</strong> I have created <code>eventHub</code> Vue instance:</p>
  
  <pre><code>require('./bootstrap');    
  
  var eventHub = new Vue();
  
  Vue.component('todos-list', require('./components/todos/TodoList.vue'));
  Vue.component('todos-add', require('./components/todos/TodoAdd.vue'));
  
  const app = new Vue({
      el: '#app'
  });
  </code></pre>
  
  <p>How can I use it in components that are created in separate <strong>.vue</strong> files?</p>
  
  <p>For example, I also have two components:</p>
  
  <ul>
  <li><p><strong>todos-list</strong> located in /components/todos/<strong>TodoList.vue</strong>, which is used to fetch the data from server-side using vue-resource:</p>
  
  <pre><code>&lt;template id="todos-list-template"&gt;
  &lt;div&gt;
      &lt;ul v-if="todos.length &gt; 0"&gt;
          &lt;li v-for="todo in todos"&gt;
              {{ todo.title }}
          &lt;/li&gt;
      &lt;/ul&gt;
  
      &lt;p v-else&gt;You don't hanve any Todos.&lt;/p&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      template: '#todos-list-template',
      data() {
          return {
              todos: {}
          }
      },
  
      mounted() {
          this.$http.get('api/vue/todos').then(function(response) {
              this.todos = response.data;
          });
      },
  
      methods: {
          handleAddedTodo: function(new_todo) {
              this.todos.push(new_todo);
          }
      },
  
      created: function() {
          eventHub.$on('add', this.handleAddedTodo);
      },
  
      destroyed: function() {
          eventHub.$off('add', this.handleAddedTodo);
      }
  }
  &lt;/script&gt;
  </code></pre></li>
  <li><p><strong>todos-add</strong> located in /components/todos/<strong>TodoAdd.vue</strong> which is used to add (save) the new '<em>todo</em>' using vue-resource:</p>
  
  <pre><code>&lt;template id="todos-add-template"&gt;
  &lt;div&gt;
      &lt;form v-on:submit.prevent="addNewTodo()"&gt;
          &lt;div class="form-group"&gt;
              &lt;input v-model="newTodo.title" class="form-control" placeholder="Add a new Todo"&gt;
          &lt;/div&gt;
  
          &lt;div class="form-group"&gt;
              &lt;button&gt;Add Todo&lt;/button&gt;
          &lt;/div&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  
  &lt;script&gt;
  
  export default {
      template: '#todos-add-template',
      data() {
          return {
              newTodo: { id: null, title: this.title, completed: false }
          }
      },
  
      methods: {
          addNewTodo() {
              this.$http.post('api/vue/todos', { title: this.newTodo.title }).then(function(response) {
                  if (response.status == 201) {
                      eventHub.$emit('add', response.data);
                      this.newTodo = { id: null, title: this.title, completed: false }
                  }
              }, function(response) {
                  console.log(response.status + ' - '+ response.statusText);
              })
          }
      }
  }
  &lt;/script&gt;
  </code></pre></li>
  </ul>
  
  <p>When I add (save) new '<em>todo</em>' using the <strong>todos-add</strong> component (<em>TodoAdd.vue</em>) - I want to update data in <strong>todos-list</strong> component. If I understood well the documentation - for component communication we need to use centralized event hub. And that's what I tried - but I am getting the following error:</p>
  
  <blockquote>
    <p>eventHub is not defined</p>
  </blockquote>
  
  <p>I guess because it is defined in <strong>app.js</strong>, but how can I use in components that are created in separate <strong>.vue</strong> files?</p>