{"id":16221809,"url":"https://github.com/eggsy/vue-lanyard","last_synced_at":"2025-07-12T22:34:28.512Z","repository":{"id":41889083,"uuid":"365635207","full_name":"eggsy/vue-lanyard","owner":"eggsy","description":"🚀 Lanyard API plugin for Vue to easily track your Discord status. Supports REST and WebSocket methods.","archived":false,"fork":false,"pushed_at":"2022-07-28T19:21:05.000Z","size":770,"stargazers_count":35,"open_issues_count":2,"forks_count":3,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-28T18:23:29.308Z","etag":null,"topics":["lanyard","plugin","vue","websocket"],"latest_commit_sha":null,"homepage":"https://npmjs.org/@eggsydev/vue-lanyard","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eggsy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"eggsy","patreon":"eggsy","custom":["https://eggsy.xyz/donate"]}},"created_at":"2021-05-09T00:14:02.000Z","updated_at":"2025-02-24T12:01:18.000Z","dependencies_parsed_at":"2022-08-11T20:20:24.181Z","dependency_job_id":null,"html_url":"https://github.com/eggsy/vue-lanyard","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggsy%2Fvue-lanyard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggsy%2Fvue-lanyard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggsy%2Fvue-lanyard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eggsy%2Fvue-lanyard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eggsy","download_url":"https://codeload.github.com/eggsy/vue-lanyard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243988956,"owners_count":20379649,"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":["lanyard","plugin","vue","websocket"],"created_at":"2024-10-10T12:09:55.381Z","updated_at":"2025-03-19T11:31:11.434Z","avatar_url":"https://github.com/eggsy.png","language":"Vue","funding_links":["https://github.com/sponsors/eggsy","https://patreon.com/eggsy","https://eggsy.xyz/donate"],"categories":[],"sub_categories":[],"readme":"# 🚀 Vue Lanyard Plugin\n\n\u003e A Vue (2) plugin to track your Discord status using [Lanyard API](https://github.com/Phineas/lanyard/).\n\n\u003cp align=\"center\"\u003e\n\n![Vue Lanyard plugin image](./images/readme.jpg)\n\n\u003c/p\u003e\n\nLanyard is a service that makes it super easy to export your live Discord presence to an API endpoint and to a WebSocket for you to use wherever you want. This plugin creates a connection between Lanyard and your Vue app **as a plugin** and lets you access the `$lanyard` anywhere in your app!\n\n✨ **This plugin supports both REST and WebSocket methods.**\n\n\u003e ⚠️ **Version 2.0.0** - BREAKING CHANGES! This is a major update to the plugin. The plugin has been completely rewritten in TypeScript and refactored all functions, dropping support for multiple user fetching and socket subscribing, but adding better handler to handle incoming data (`onMessage`) and using `isomorphic-fetch` to work on server-side too.\n\n### 🔧 Install\n\nYou'll need [Node.js](https://nodejs.org) and an existing Vue app to use this plugin (you can find an example vue-cli app in `example/`).\n\n- Download the module via NPM, Yarn or your package manager.\n  - For NPM: `npm install @eggsydev/vue-lanyard`\n  - For Yarn: `yarn add @eggsydev/vue-lanyard`\n\n### 🤓 Setup\n\nAfter you download the plugin, you have to import it into your app with `Vue.use()`. This will let you access the `$lanyard` method anywhere in your app!\n\n```js\nimport Vue from \"vue\";\nimport VueLanyard from \"@eggsydev/vue-lanyard\";\n\nVue.use(VueLanyard);\n\n// Rest of your Vue app configuration\n```\n\nAnd then you will have the access to `$lanyard` method in your app.\n\n```js\nexport default {\n  // Call it on `mounted`\n  async mounted() {\n    const response = await this.$lanyard({\n      userId: \"162969778699501569\",\n    });\n\n    // Do whatever you want with Lanyard response object\n  },\n};\n```\n\nLanyard method allows you to choose between WebSocket and REST connection. In both cases, the `userId` option is required. You can also have multiple IDs in array format.\n\n```js\n/*\n  This will actually return multiple Lanyard objects in a single array.\n\n  Note:\n    I suggest you to use WebSocket connections when listening to\n    multiple users because this mode basically sends a different\n    request for each user at the same time.\n*/\n\nthis.$lanyard({\n  userId: [\"162969778699501569\", \"94490510688792576\"],\n});\n```\n\nIf you want to use the WebSocket way and get changes in **real-time**, you can follow this example.\n\n```js\n/*\n  Listening to WebSocket is a bit different but it's nothing\n  different than listening to a \u003cWebSocket\u003e\n*/\n\nconst socket = await this.$lanyard({\n  userId: \"162969778699501569\",\n  socket: true,\n});\n\n// Set a listener for \"message\" event\nsocket.addEventListener(\"message\", ({ data }) =\u003e {\n  const { d: status } = JSON.parse(data);\n\n  // Do whatever you want with `status`\n});\n```\n\n\u003e ⚠ When using WebSocket, if you're using Vue Router, it won't close the socket connection even after you change the page, and if you return to the same page where you are connecting to socket, it will create another connection which will cause conflicts and unnecessary socket connections. You can use Vue's `beforeDestroy` hook to disconnect from the socket previous socket before leaving the page, check `example/src/components/Lanyard/WebSocket.vue` for more details.\n\n### 🤔 When to use WebSocket?\n\nWebSockets are amazing, but do you actually need them? That depends on what you want to achieve. If you want to achieve these, you might want to go with WebSocket.\n\n- You want real-time updates.\n- You want to get presence data of multiple users but don't want separate requests for each user.\n- You want something better and more performant than sending requests with `setInterval`.\n\nIf you only want to fetch data when the page loads and don't want to update it until another page refresh, you can go with REST (normal) method. It's up to you!\n\n### 🌟 Nuxt.js\n\nYou can use this plugin the way you use Vue plugins (for client-side) in Nuxt.js!\n\n```js\n// plugins/VueLanyard.js\nimport Vue from \"vue\";\nimport VueLanyard from \"@eggsydev/vue-lanyard\";\n\nVue.use(VueLanyard);\n```\n\nAnd reference that file in your `nuxt.config`.\n\n```js\n// nuxt.config.js\nexport default {\n  plugins: [\n    {\n      src: \"@/plugins/VueLanyard\",\n      mode: \"client\",\n    },\n  ],\n};\n```\n\n### 🔗 TypeScript\n\nThis plugin comes with type support. You can import types from `@eggsydev/vue-lanyard/@types` and use them in your script.\n\n### 🙋‍♂️ Credits\n\n- [Phineas](https://github.com/Phineas/) - Creator of Lanyard API\n\n### 💖 Sponsors\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sponsors/eggsy\"\u003e\n    \u003cimg src='https://cdn.jsdelivr.net/gh/eggsy/.github/sponsors.svg'/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n### 📝 License\n\nMIT License © 2021 [Abdulbaki Dursun](https://github.com/eggsy)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feggsy%2Fvue-lanyard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feggsy%2Fvue-lanyard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feggsy%2Fvue-lanyard/lists"}