Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 22, 2022 10:13 pm GMT

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


Original Link: https://dev.to/winnerose/how-to-use-nuxtjs-lanyard-2890

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To