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

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
});
dsfphczao23473056
dsfphczao23473056 是的,我正在使用laravelmix,主要是使用npmrunwatch的官方文档编译我的js和css文件
大约 2 年之前 回复
dongmao4486
dongmao4486 好吧,我在所有课程上看到人们正在使用laravelecho和vue内部的刀片模板不是正确使用它的方式,如果我想用vue编写一些小js逻辑不是正确的方法来写它里面刀片模板,而不是为那个创建一个单独的组件+我在我想要使用的刀片模板中有一些逻辑,我不能用vue组件,我做错了方法吗?
大约 2 年之前 回复
doudiewen9435
doudiewen9435 我们需要更多信息来帮助您解决此问题。你的前端构建设置是什么?你在使用laravelmix吗?发布混合配置和包含Vue实例的主js文件。如果你正在使用mix,你必须通过npminstall安装echo和vue之类的依赖项,然后在main.js或你称之为的任何内容中导入/需要它们。通过这个你就可以使用它。我认为没有任何理由将Vue脚本包含在您的刀片中。混合的默认设置不需要这个。
大约 2 年之前 回复

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问
相关内容推荐