title: laravel 5.7 + vue.js 2 + laravel echo + pusher, how to make them work together?
body: <p>I am able to configure Laravel Echo with Pusher and install all the necessary dependencies. I have watch tutorials on lynda and laracast how to do this, but they are old and not for these versions in the title of this question. So, from what i have learned so far from lynda and laracast i have to run Vue from the blade template, but i cant make this work unless i add manual this line of code <code>&lt;script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"&gt;&lt;/script&gt;</code> inside my blade engine. i am sure this is not the way things have to work as i am getting two instances of vue by added this line of code inside my blade template. I cant make it work as i am getting <code>Vue is not defined</code> if i use it inside my blade template this way:</p>
  
  <pre><code>let app = new Vue({
      el: '#app',
          data() {
             return {
                  ...
             }
          },
  )}
  </code></pre>
  
  <p>So, even when i run two instances of Vue i can't get the laravel Echo to work from Blade as when i use it i am getting <code>Echo is not defined</code> for example using this code:</p>
  
  <pre><code>Echo.join('form.' + '{{ $product-&gt;id }}')
      .here((users) =&gt; {
           this.count = users.length;
      });
  </code></pre>
  
  <p>I also tried using <code>window</code> like this:</p>
  
  <pre><code>window.Echo.join('form.' + '{{ $product-&gt;id }}')
      .here((users) =&gt; {
           this.count = users.length;
      });
  </code></pre>
  
  <p>But that way i am getting <code>Cannot read property 'join' of undefined"</code> </p>
  
  <p>So basically i am lost trying to figure it out how to use vue inside the blade the proper way + laravel echo and pusher js.</p>
  
  <p><strong>UPDATED</strong></p>
  
  <p>here is my app.js file:</p>
  
  <pre><code>require('./bootstrap');
  window.Vue = require('vue');
  Vue.component('search-component', require('./components/Search.vue'));
  </code></pre>
  
  <p>and here is my boostrap.js file:</p>
  
  <pre><code>window._ = require('lodash');
  window.Popper = require('popper.js').default;
  
  try {
      window.$ = window.jQuery = require('jquery');
  
      require('bootstrap');
  } catch (e) {}
  
  window.axios = require('axios');
  
  window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
  
  let token = document.head.querySelector('meta[name="csrf-token"]');
  
  if (token) {
      window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
  } else {
      console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
  }
  
  import Echo from 'laravel-echo'
  
  window.Pusher = require('pusher-js');
  
  window.Echo = new Echo({
      broadcaster: 'pusher',
      key: process.env.MIX_PUSHER_APP_KEY,
      cluster: process.env.MIX_PUSHER_APP_CLUSTER,
      encrypted: true
  });
  </code></pre>