add Vue3 support

README.md

@@ -1,6 +1,6 @@
 # 🚀 Vue Lanyard Plugin
 
-> A Vue (2) plugin to track your Discord status using [Lanyard API](https://github.com/Phineas/lanyard/).
+> A Vue plugin to track your Discord status using [Lanyard API](https://github.com/Phineas/lanyard/).
 
 <p align="center">
 
@@ -88,6 +88,69 @@ socket.addEventListener("message", ({ data }) => {
 
 > ⚠ 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.
 
+### 🤓 Setup for Vue3
+
+After you download the plugin, you have to import it into your app with `app.use()`. This will let you inject the `lanyard` method anywhere in your app!
+
+```js
+import { createApp } from 'vue'
+import App from './App.vue'
+
+import VueLanyard from '@eggsydev/vue-lanyard'
+
+const app = createApp(App)
+app.use(VueLanyard)
+
+// Rest of your Vue app configuration
+```
+
+And then you can inject the `lanyard` method in your app.
+
+```js
+import { inject, onMounted, ref } from 'vue'
+
+const $lanyard = inject('lanyard')
+const response = ref({})
+
+onMounted(async () => {
+  // Call it on `mounted`
+  response.value = await $lanyard({
+    userId: '162969778699501569',
+  })
+
+  // Do whatever you want with Lanyard response object
+})
+```
+
+If you want to use the WebSocket way and get changes in **real-time**, you can follow this example.
+
+```js
+/*
+  Listening to WebSocket is a bit different but it's nothing
+  different than listening to a <WebSocket>
+*/
+
+import { ref, onMounted } from 'vue'
+
+const socket = ref({})
+
+onMounted(async () => {
+  socket.value = await $lanyard({
+    userId: '162969778699501569',
+    socket: true,
+  })
+
+  // Set a listener for "message" event
+  socket.value.addEventListener('message', ({ data }) => {
+    const { d: status } = JSON.parse(data)
+
+    // Do whatever you want with `status`
+  })
+})
+```
+
+> ⚠ 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 `beforeUnmount` hook to disconnect from the socket previous socket before leaving the page, check `example-vue3/src/components/Lanyard/WebSocket.vue` for more details.
+
 ### 🤔 When to use WebSocket?
 
 WebSockets 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.

example-vue3/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

example-vue3/README.md

@@ -0,0 +1,29 @@
+# vue-lanyard-example-vue3
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```

example-vue3/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>