laravel 5.7 + vue.js 2 + laravel echo + pusher，如何让它们一起工作？

Question

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 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script> 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 Vue is not defined if i use it inside my blade template this way:

let app = new Vue({
    el: '#app',
        data() {
           return {
                ...
           }
        },
)}

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 Echo is not defined for example using this code:

Echo.join('form.' + '{{ $product->id }}')
    .here((users) => {
         this.count = users.length;
    });

I also tried using window like this:

window.Echo.join('form.' + '{{ $product->id }}')
    .here((users) => {
         this.count = users.length;
    });

But that way i am getting Cannot read property 'join' of undefined"

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.

UPDATED

here is my app.js file:

require('./bootstrap');
window.Vue = require('vue');
Vue.component('search-component', require('./components/Search.vue'));

and here is my boostrap.js file:

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
});

Answer 1

after day of searching i finally manage to make vue/echo/pusher/dash to work from blade template. for more info and reference to actual working code, please check this github repo

I will try to write a guite how to do this step by step:

1. Make sure you are running the latest version of npm. this is essential. (mine is 6.4.1)
2. After installing laravel run npm install

3. Inside bootstrap.js file this code

   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
   });
   

4. Register to pusher.com and create an app. Fill out your data from pusher to .env file (like app id, secret, cluster and etc)

5. (Optional) Comment out this code from app.js as you dont need it (if you are using it dont do it, but in most cases you never will)

   // const app = new Vue({
   //   el: '#app',
   // });
   

6. Go to the main blade template of your app in my case it is called app.blade.php and under the <script src="{{ asset('js/app.js') }}"></script> add this line of code @yield('scripts'). now you can add scripts to your blade templates
7. Now you can create your script section inside your blade template using @section('scripts') for benning tag and @endsection for closing tag

8. here is a simple js code how to use Vue and Echo after you opened the script section:

   <script type="text/javascript">
     let app = new Vue({
       el: '#app',
       data() {
         return {
           viewers: [],
           count: 0,
         }
       },
       mounted() {
         this.listen();
       },
       methods: {
         listen() {
           Echo.join('chat.' + '{{ $take->id }}')
             .here((users) => {
               this.count = users.length;
               this.viewers = users;
              })
              .joining((user) => {
                this.count++;
                this.viewers.push(user);
               })
               .leaving((user) => {
                 this.count--;
                 _.pullAllBy(this.viewers, [user]);
               });
           }
       },
   });