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.

• Alysum: Source | Website
• WinneRose: Source | Website

//Example Fetching Profile Picture from Discord Avatar
async 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