# 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](https://github.com/WinneRose/Alysum) | [Website](https://alysum.vercel.app/)
- WinneRose: [Source](https://github.com/WinneRose/winnerose.github.io) | [Website](https://winnerose.live/)
```
//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