{"id":15043726,"url":"https://github.com/happydemon/vue-echo","last_synced_at":"2025-04-05T16:04:21.179Z","repository":{"id":12604624,"uuid":"72344266","full_name":"happyDemon/vue-echo","owner":"happyDemon","description":"Vue integration for the Laravel Echo library.","archived":false,"fork":false,"pushed_at":"2019-02-27T17:34:15.000Z","size":154,"stargazers_count":228,"open_issues_count":3,"forks_count":24,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-12-30T11:52:12.214Z","etag":null,"topics":["laravel-echo","pusher","socket-io","vue","vue-echo","vue2","vuejs"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/happyDemon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-10-30T11:03:24.000Z","updated_at":"2024-09-12T13:15:41.000Z","dependencies_parsed_at":"2022-08-07T07:00:26.567Z","dependency_job_id":null,"html_url":"https://github.com/happyDemon/vue-echo","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happyDemon%2Fvue-echo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happyDemon%2Fvue-echo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happyDemon%2Fvue-echo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/happyDemon%2Fvue-echo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/happyDemon","download_url":"https://codeload.github.com/happyDemon/vue-echo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247361615,"owners_count":20926642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["laravel-echo","pusher","socket-io","vue","vue-echo","vue2","vuejs"],"created_at":"2024-09-24T20:49:30.455Z","updated_at":"2025-04-05T16:04:21.137Z","avatar_url":"https://github.com/happyDemon.png","language":"JavaScript","readme":"# vue-echo\nVue 2 integration for the Laravel Echo library.\n\nThis 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`.\n\n## Install\n\n``` bash\nnpm install vue-echo --save\n```\n  \n## Usage\n\n### Initialize\nFirst you'll need to register the plugin and, optionally, initialize the Echo instance.\n\n``` js\nimport VueEcho from 'vue-echo';\n  \nVue.use(VueEcho, {\n    broadcaster: 'pusher',\n    key: 'PUSHER KEY'\n});\n\n/**\n * Alternatively you can pass an echo instance:\n * ********************************************\n * import Echo from 'laravel-echo';\n * \n * const EchoInstance = new Echo({\n *     broadcaster: 'pusher',  \n *     key: 'PUSHER KEY'\n * });\n * Vue.use(VueEcho, EchoInstance);\n */\n```\n\n### Using Echo\nOnce 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.\n\n```js\nvar vm = new Vue({\n    mounted() {\n        // Listen for the 'NewBlogPost' event in the 'team.1' private channel\n        this.$echo.private('team.1').listen('NewBlogPost', (payload) =\u003e {\n            console.log(payload);\n        });\n    }\n});\n```\n\n### Subscribe your Vue instance to a single channel\nYou can subscribe a vue instance to a single standard channel if needed and define your events.\n\n```js\nvar vm = new Vue({\n    channel: 'blog',\n    echo: {\n        'BlogPostCreated': (payload, vm) =\u003e {\n            console.log('blog post created', payload);\n        },\n        'BlogPostDeleted': (payload, vm) =\u003e {\n            console.log('blog post deleted', payload);\n        }\n    }\n});\n```\n\nSince the scope of `this` would be the same as the scope where you declare your Vue instance a second parameter is added to these locally registered events. This parameter is a direct reference to your Vue instance, you can make any changes you need through there.\n\n#### Subscribing to channels\n\nLaravel Echo allows you to subscribe to: normal, private and presence channels.\n\nIn the example above, we subscribed to a standard channel.\n\n##### Private channel\nIf you would like to subscribe to a private channel instead, prefix your channel name with `private:`\n\n```js\nvar vm = new Vue({\n    channel: 'private:team.1',\n    echo: {\n        'BlogPostCreated': (payload, vm) =\u003e {\n            console.log('blog post created', payload);\n        },\n        'BlogPostDeleted': (payload, vm) =\u003e {\n            console.log('blog post deleted', payload);\n        }\n    }\n});\n```\n\n##### Presence channel\n\nIf you would like to subscribe to presence channel instead, prefix your channel name with `presence:`\n\n```js\nvar vm = new Vue({\n    channel: 'presence:team.1.chat',\n    echo: {\n        'NewMessage': (payload, vm) =\u003e {\n            console.log('new message from team', payload);\n        }\n    }\n});\n```\n\n### Manually listening to events\n\nIf there's a scenario where you want to listen to events after certain conditions are met, you can do so through `this.channel`:\n\n```js\nvar vm = new Vue({\n    channel: 'private:team.1',\n    echo: {\n        'BlogPostCreated': (payload, vm) =\u003e {\n            console.log('blog post created', payload);\n        },\n        'BlogPostDeleted': (payload, vm) =\u003e {\n            console.log('blog post deleted', payload);\n        }\n    },\n    mounted(){\n        if(window.user.role == 'admin'){\n            this.channel.listen('BlogPostEdited', (payload) =\u003e {\n                console.log('As admin I get notified of edits', payload);\n            });\n        }\n    }\n});\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhappydemon%2Fvue-echo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhappydemon%2Fvue-echo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhappydemon%2Fvue-echo/lists"}