vue-echo

import Vue from 'vue'; import VueEcho from 'vue-echo'; import Echo from 'laravel-echo'; // Assuming laravel-echo is installed // Option 1: Initialize VueEcho directly with configuration Vue.use(VueEcho, { broadcaster: 'pusher', key: 'YOUR_PUSHER_APP_KEY', // Replace with your Pusher App Key or environment variable cluster: 'mt1', // Optional, replace with your cluster forceTLS: true // Optional }); // Option 2: Pass an existing Laravel Echo instance /* const echoInstance = new Echo({ broadcaster: 'pusher', key: 'YOUR_PUSHER_APP_KEY', cluster: 'mt1', forceTLS: true }); Vue.use(VueEcho, echoInstance); */ const app = new Vue({ el: '#app', data: { messages: [] }, // Declarative channel subscription within the component channel: 'public.chat', echo: { 'ChatMessageSent': (payload, vm) => { console.log('New message received via declarative config:', payload.message); vm.messages.push(payload.message); } }, mounted() { console.log('VueEcho instance available:', this.$echo); // Manual subscription via this.$echo this.$echo.private('private.notifications.user.1') .listen('NewNotification', (notification) => { console.log('New private notification:', notification); }); // Manually listen on the component's channel if defined if (this.channel) { this.channel.listen('AnotherEvent', (payload) => { console.log('Another event on component channel:', payload); }); } }, template: ` <div> <h1>Vue-Echo Example</h1> <p>Check console for real-time events.</p> <h2>Public Chat Messages:</h2> <ul> <li v-for="(msg, index) in messages" :key="index">{{ msg }}</li> </ul> </div> ` });