title: Laravel echo with vue.js
body: <p>I'm trying to make a task app with <code>Laravel echo</code> (just for checking out Laravel echo). (I use Laravel 5.3)</p>
  
  <p>But I've 2 errors that I cannot fix. In my console I receive the following:</p>
  
  <p><a href="https://i.stack.imgur.com/orPi3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/orPi3.png" alt="enter image description here"></a></p>
  
  <p>I'm using <code>webpack</code>.  </p>
  
  <p>My component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-8 col-md-offset-2"&gt;
                  &lt;div class="panel panel-default"&gt;
                      &lt;div class="panel-heading"&gt;Example Component&lt;/div&gt;
  
                      &lt;div class="input-group"&gt;
                          &lt;input type="text" class="form-control" placeholder="Task"&gt;
                          &lt;button type="button" class="btn" @click="store()"&gt;Button&lt;/button&gt;
                      &lt;/div&gt;
  
                      &lt;ul v-for="task in tasks"&gt;
                          &lt;li&gt;{{ task.name }}&lt;/li&gt;
                      &lt;/ul&gt;    
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
  import Vue from 'vue';
  import Echo from "laravel-echo"
  
      export default {
          ready() {
              this.getAll();
              this.listen();
          },
  
          data() {
              return {
                  tasks: {}
              };
          },
  
          methods: {
              store() {
                  alert('df');
              },
  
              getAll() {
                  Vue.http.get('/api/all')
                      .then(({data}) =&gt; {
                          this.tasks = data.tasks
                        }, (error) =&gt; {
                          console.log(error);
                      });
              },
  
              listen() {
                  Echo.channel('test')
                      .listen('TaskCreated', event =&gt; {
                          this.tasks.push(event.task);
                      });
              }
          }
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>App.js:</p>
  
  <pre><code>/**
   * First we will load all of this project's JavaScript dependencies which
   * include Vue and Vue Resource. This gives a great starting point for
   * building robust, powerful web applications using Vue and Laravel.
   */
  
  require('./bootstrap');
  
  /**
   * Next, we will create a fresh Vue application instance and attach it to
   * the body of the page. From here, you may begin adding components to
   * the application, or feel free to tweak this setup for your needs.
   */
  
  Vue.component('example', require('./components/Example.vue'));
  
  const app = new Vue({
      el: 'body'
  });
  </code></pre>
  
  <p>bootstrap.js:</p>
  
  <pre><code>window._ = require('lodash');
  
  /**
   * We'll load jQuery and the Bootstrap jQuery plugin which provides support
   * for JavaScript based Bootstrap features such as modals and tabs. This
   * code may be modified to fit the specific needs of your application.
   */
  
  window.$ = window.jQuery = require('jquery');
  require('bootstrap-sass');
  
  /**
   * Vue is a modern JavaScript library for building interactive web interfaces
   * using reactive data binding and reusable components. Vue's API is clean
   * and simple, leaving you to focus on building your next great project.
   */
  
  window.Vue = require('vue');
  require('vue-resource');
  
  /**
   * We'll register a HTTP interceptor to attach the "CSRF" header to each of
   * the outgoing requests issued by this application. The CSRF middleware
   * included with Laravel will automatically verify the header's value.
   */
  
  Vue.http.interceptors.push((request, next) =&gt; {
      request.headers.set('X-CSRF-TOKEN', Laravel.csrfToken);
  
      next();
  });
  
  /**
   * Echo exposes an expressive API for subscribing to channels and listening
   * for events that are broadcast by Laravel. Echo and event broadcasting
   * allows your team to easily build robust real-time web applications.
   */
  
  import Echo from "laravel-echo"
  
  window.Echo = new Echo({
      broadcaster: 'pusher',
      key: '183d16cb449d' //not my real code
  });
  </code></pre>
  
  <p>So what could be wrong here?</p>