{"id":16574,"library":"vue-echo","title":"Vue.js integration for Laravel Echo","description":"Vue-Echo provides a plugin for integrating Laravel Echo, a JavaScript library for real-time event broadcasting, into Vue.js applications. This package is specifically designed for Vue 2 applications, injecting an Echo instance into all Vue components via `this.$echo` and offering declarative channel subscription options within component definitions. The current stable version is 1.0.2, with its last known update fixing a minor bug. The package's release cadence appears to have slowed considerably, likely due to its focus on Vue 2 while Vue 3 is the current major version. It differentiates itself by simplifying the integration of Laravel Echo's real-time features with Vue's component lifecycle and reactive data patterns, offering both global and component-specific event handling mechanisms.","status":"maintenance","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/happyDemon/vue-echo","tags":["javascript","laravel","pusher","socket.io","vue"],"install":[{"cmd":"npm install vue-echo","lang":"bash","label":"npm"},{"cmd":"yarn add vue-echo","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-echo","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for real-time broadcasting functionality; vue-echo wraps and integrates it.","package":"laravel-echo","optional":false}],"imports":[{"note":"VueEcho is the default export for the plugin. It is passed to `Vue.use()` for plugin registration.","wrong":"import { VueEcho } from 'vue-echo';","symbol":"VueEcho","correct":"import VueEcho from 'vue-echo';"},{"note":"The Laravel Echo instance is automatically injected into all Vue instances as `this.$echo` after plugin registration.","symbol":"$echo","correct":"this.$echo.private('channel').listen('Event', callback);"},{"note":"For declarative, component-level subscriptions, define `channel` and `echo` options directly on your Vue instance or component.","symbol":"channel/echo component options","correct":"new Vue({\n  channel: 'my-channel',\n  echo: { 'MyEvent': (payload, vm) => { /* ... */ } }\n});"}],"quickstart":{"code":"import Vue from 'vue';\nimport VueEcho from 'vue-echo';\nimport Echo from 'laravel-echo'; // Assuming laravel-echo is installed\n\n// Option 1: Initialize VueEcho directly with configuration\nVue.use(VueEcho, {\n    broadcaster: 'pusher',\n    key: 'YOUR_PUSHER_APP_KEY', // Replace with your Pusher App Key or environment variable\n    cluster: 'mt1', // Optional, replace with your cluster\n    forceTLS: true // Optional\n});\n\n// Option 2: Pass an existing Laravel Echo instance\n/*\nconst echoInstance = new Echo({\n    broadcaster: 'pusher',\n    key: 'YOUR_PUSHER_APP_KEY',\n    cluster: 'mt1',\n    forceTLS: true\n});\nVue.use(VueEcho, echoInstance);\n*/\n\nconst app = new Vue({\n    el: '#app',\n    data: {\n        messages: []\n    },\n    // Declarative channel subscription within the component\n    channel: 'public.chat',\n    echo: {\n        'ChatMessageSent': (payload, vm) => {\n            console.log('New message received via declarative config:', payload.message);\n            vm.messages.push(payload.message);\n        }\n    },\n    mounted() {\n        console.log('VueEcho instance available:', this.$echo);\n        // Manual subscription via this.$echo\n        this.$echo.private('private.notifications.user.1')\n            .listen('NewNotification', (notification) => {\n                console.log('New private notification:', notification);\n            });\n        \n        // Manually listen on the component's channel if defined\n        if (this.channel) {\n            this.channel.listen('AnotherEvent', (payload) => {\n                console.log('Another event on component channel:', payload);\n            });\n        }\n    },\n    template: `\n        <div>\n            <h1>Vue-Echo Example</h1>\n            <p>Check console for real-time events.</p>\n            <h2>Public Chat Messages:</h2>\n            <ul>\n                <li v-for=\"(msg, index) in messages\" :key=\"index\">{{ msg }}</li>\n            </ul>\n        </div>\n    `\n});","lang":"javascript","description":"This quickstart demonstrates how to initialize `vue-echo` with Laravel Echo configuration (Pusher example), and then how to subscribe to public and private channels using both the `this.$echo` instance and the declarative `channel` and `echo` component options."},"warnings":[{"fix":"Update event handlers in the `echo` component option to accept `(payload, vm)` and use `vm` instead of `this` for accessing the Vue instance context.","message":"Version 1.0.0 introduced `vm` as a second parameter to locally registered event callbacks (i.e., callbacks defined in the `echo` option of a Vue component). This was added to provide direct access to the Vue instance, improving context handling. Code written for versions prior to 1.0.0 where `this` was used within these callbacks might need adjustment if `this` was expected to refer to the Vue instance.","severity":"breaking","affected_versions":"<1.0.0"},{"fix":"For Vue 3 projects, you must find an alternative solution or integrate Laravel Echo manually via a custom plugin or composable. This package is not compatible with Vue 3.","message":"This library is designed for Vue 2. It will not work with Vue 3 due to fundamental changes in Vue's plugin system and reactivity model. Attempting to use `vue-echo` in a Vue 3 project will result in errors.","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Since v1.0.0, event callbacks receive the Vue instance as a second parameter (`(payload, vm) => { vm.someData = payload; }`). Always use this `vm` parameter to safely access component data and methods. For manual listeners via `this.$echo.listen()`, arrow functions `() => {}` are recommended to retain the lexical `this` context of the `mounted` hook or method where they are defined.","message":"When defining event listeners within the `echo` option of a Vue component, the `this` context inside the callback does not directly refer to the Vue instance by default (prior to v1.0.0, or if not using the `vm` parameter in v1.0.0+).","severity":"gotcha","affected_versions":">=0.1.0"},{"fix":"Understand that `this.channel` is a convenience for the single channel defined in the component's `channel` option. For dynamic subscriptions or managing multiple channels, always use the `this.$echo` instance (e.g., `this.$echo.channel('another-channel')`).","message":"The `channel` option on a Vue instance (`this.channel`) only references the instance's specifically subscribed channel when using the declarative `channel` option. For other channels, use the global `this.$echo` instance.","severity":"gotcha","affected_versions":">=0.1.0"}],"env_vars":null,"last_verified":"2026-04-22T00:00:00.000Z","next_check":"2026-07-21T00:00:00.000Z","problems":[{"fix":"Ensure `Vue.use(VueEcho, { broadcaster: 'pusher', key: '...' });` is called before creating your root Vue instance, and that all necessary `laravel-echo` dependencies (like `pusher-js` or `socket.io-client`) are installed and configured correctly.","cause":"The `vue-echo` plugin or `laravel-echo` instance was not properly initialized or registered with Vue.","error":"TypeError: Cannot read properties of undefined (reading 'private') at VueComponent.mounted"},{"fix":"Verify that `Vue.use(VueEcho, ...)` is invoked correctly and that `vue-echo` and `laravel-echo` are installed (`npm install vue-echo laravel-echo pusher-js`). For server-side rendering (SSR), ensure `this.$echo` access is guarded against non-browser environments.","cause":"The `vue-echo` plugin has not been registered with Vue, or the component is being accessed before the plugin has fully initialized.","error":"TypeError: this.$echo is undefined"},{"fix":"Run `npm install vue-echo laravel-echo --save` or `yarn add vue-echo laravel-echo` to add the package to your project.","cause":"The `vue-echo` package is not installed as a project dependency.","error":"Webpack compilation error: Cannot find module 'vue-echo'"}],"ecosystem":"npm"}