# vue-echo-laravel > It's a laravel/echo wrapper for Vue JS ^2.0. This Vue plugin injects a Laravel Echo instance into all of your vue instances, allowing for a simple channel subscription on each instance, or using Laravel Echo through this.$echo. It will be synced with late Latest version **1.0.0** (published 2022-05-16) · MIT license · 0 weekly downloads ## Install ```sh npm install vue-echo-laravel pnpm add vue-echo-laravel yarn add vue-echo-laravel bun add vue-echo-laravel ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.0 | | Published | 2022-05-16 | | First published | 2017-05-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 2 | | Unpacked size | 95.8 KB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 20 | | Author | Manash | | Maintainers | msonowal | | Keywords | laravel-echo, vue-echo, vuejs, echo, socketio, broadcasting, pusher, realtime, socket.io | ## Links - npm: https://www.npmjs.com/package/vue-echo-laravel - Repository: https://github.com/msonowal/vue-echo - Issues: https://github.com/msonowal/vue-echo/issues - npm.io page: https://npm.io/package/vue-echo-laravel ## Dependencies (2) - [pusher-js](https://npm.io/package/pusher-js.md) ^7.0.6 - [laravel-echo](https://npm.io/package/laravel-echo.md) ^1.11.4 ## Alternatives - [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads - [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads - [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads - [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads - [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads ## Recent versions - 1.0.0 (latest) — 2022-05-16 - 0.1.0 — 2021-06-16 - 0.0.6 — 2018-12-14 - 0.0.4 — 2017-08-07 - 0.0.3 — 2017-07-26 - 0.0.2 — 2017-07-26 - 0.0.1 — 2017-05-17 ## README # vue-echo Vue 2 integration for the Laravel Echo library with latest dependencies. This Vue plugin injects a Laravel Echo instance into all of your vue instances, allowing for a simple channel subscription on each instance, or using Laravel Echo through `this.$echo`. You can use socket.io and pusher or any config as per laravel/echo This project does not require updates as it directly uses your latest version [NPM LINK package/vue-echo-laravel ](https://www.npmjs.com/package/vue-echo-laravel) ## Install via yarn ``` bash yarn add vue-echo-laravel ``` or via npm ``` bash npm install vue-echo-laravel --save ``` ## Usage ### Initialize First you'll need to register the plugin and, optionally, initialize the Echo instance. ``` js import VueEcho from 'vue-echo-laravel'; Vue.use(VueEcho, { broadcaster: 'socket.io', host: window.location.hostname + ':6001', }); /** * Alternatively you can pass an echo instance: * ******************************************** * import Echo from 'laravel-echo'; * * const EchoInstance = new Echo({ * broadcaster: 'socket.io', * host: window.location.hostname + ':6001', * namespace: 'App.Events', * }); * Vue.use(VueEcho, EchoInstance); */ ``` ### Using Echo Once vue-echo is registered, every vue instance is able to subscribe to channels and listen to events through the `this.$echo` property on the connection you specified earlier. ```js var vm = new Vue({ mounted() { // Listen for the 'NewBlogPost' event in the 'team.1' private channel this.$echo.private('team.1').listen('NewBlogPost', (payload) => { console.log(payload); }); } }); ``` ### Subscribe your Vue instance to a single channel You can subscribe a vue instance to a single standard channel if needed and define your events. ```js var vm = new Vue({ channel: 'blog', echo: { 'BlogPostCreated': (payload) => { console.log('blog post created', payload); }, 'BlogPostDeleted': (payload) => { console.log('blog post deleted', payload); } } }); ``` You can feel free to use `this` inside Your methods. #### Subscribing to channels Laravel Echo allows you to subscribe to: normal, private and presence channels. In the example above, we subscribed to a standard channel. ##### Private channel If you would like to subscribe to a private channel instead, prefix your channel name with `private:` ```js var vm = new Vue({ channel: 'private:user.1', echo: { 'BlogPostCreated': (payload) => { console.log('blog post created', payload); }, 'BlogPostDeleted': (payload) => { console.log('blog post deleted', payload); } } }); ``` If you need to compute channel name, you should pass `channel` as function. ```js var vm = new Vue({ channel() { return `private:user.${ this.userId }` }, echo: { 'BlogPostCreated': (payload) => { console.log('blog post created', payload); }, 'BlogPostDeleted': (payload) => { console.log('blog post deleted', payload); } }, computed: { userId() { return 1; } } }); ```` ##### Presence channel If you would like to subscribe to presence channel instead, prefix your channel name with `presence:` ```js var vm = new Vue({ channel: 'presence:user.1.chat', echo: { 'NewMessage': (payload) => { console.log('new message from team', payload); } } }); ``` ### Manually listening to events If there's a scenario where you want to listen to events after certain conditions are met, you can do so through `this.channel`: ```js var vm = new Vue({ channel: 'private:user.1', echo: { 'BlogPostCreated': (payload) => { console.log('blog post created', payload); }, 'BlogPostDeleted': (payload) => { console.log('blog post deleted', payload); } }, mounted(){ if(window.user.role == 'admin'){ this.channel.listen('BlogPostEdited', (payload) => { console.log('As admin I get notified of edits', payload); }); } } }); ``` ### Acepting PR for Vue Composition API --- _Source: https://npm.io/package/vue-echo-laravel · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._