An Interest In:
Web News this Week
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
- March 22, 2024
How to Use "NuxtJS Lanyard"
What is lanyard used for?
Lanyard 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 Nuxt app as a plugin and lets you access the $lanyard anywhere in your app!
Install
You'll need Node.js and an existing NuxtJS app to use this plugin
Download the module via NPM, Yarn or your package manager.- For NPM: npm install @eggsydev/vue-lanyard- For Yarn: yarn add @eggsydev/vue-lanyard
Setup for NuxtJS
Create *plugins * folder in root project
Create "Nuxtlanyard.js" in plugins folder (You don't need to use this name, it can be different name, but make a note of it. It will be used in nuxt.config.js)
Open "Nuxtlanyard.js" file to edit then write this code in your file
import Vue from "vue";import VueLanyard from "@eggsydev/vue-lanyard";Vue.use(VueLanyard);
- Then you need to add your plugin to nuxt.config.js file
export default { plugins: [ { src: "@/plugins/Nuxtlanyard.js", mode: "client", }, ],};
Examples
The current winnerose.live website is developed with lanyard's js side, but my website alysum is completely powered by nuxt.
//Example Fetching Profile Picture from Discord Avatarasync mounted() { const socket = await this.$lanyard({ userId: '701896585604497490', socket: true, }) // Set a listener for "message" event socket.addEventListener('message', ({ data }) => { const { d: status } = JSON.parse(data) this.profileurl = `https://cdn.discordapp.com/avatars/701896585604497490/${status.discord_user.avatar}.png?size=256` this.name = status.discord_user.username })
Thanks For Reading Article
- WinneRose | https://github.com/WinneRose
Original Link: https://dev.to/winnerose/how-to-use-nuxtjs-lanyard-2890
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To