끈은 무엇을 위해 사용됩니까?

Lanyard는 라이브 Discord 프레즌스를 API 엔드포인트 및 WebSocket으로 매우 쉽게 내보내어 원하는 곳 어디에서나 사용할 수 있게 해주는 서비스입니다. 이 플러그인은 Lanyard와 Nuxt 앱을 플러그인으로 연결하여 앱 어디에서나 $lanyard에 액세스할 수 있게 해줍니다!

🔧 설치

이 플러그인을 사용하려면 Node.js와 기존 NuxtJS 앱이 필요합니다.

Download the module via NPM, Yarn or your package manager.
- For NPM: npm install @eggsydev/vue-lanyard
- For Yarn: yarn add @eggsydev/vue-lanyard

🚀 NuxtJS 설정

루트 프로젝트에 *plugins * 폴더 생성

플러그인 폴더에 "Nuxtlanyard.js"를 생성합니다(이 이름을 사용할 필요는 없으며 다른 이름일 수 있지만 메모해 둡니다. nuxt.config.js에서 사용됩니다)

"Nuxtlanyard.js"파일을 열어 편집한 다음 이 코드를 파일에 작성합니다.

import Vue from "vue";
import VueLanyard from "@eggsydev/vue-lanyard";

Vue.use(VueLanyard);

그런 다음 nuxt.config.js 파일에 플러그인을 추가해야 합니다.

export default {
  plugins: [
    {
      src: "@/plugins/Nuxtlanyard.js",
      mode: "client",
    },
  ],
};

❤️ 예

현재 위너로즈.라이브 웹사이트는 lanyard의 js 쪽에서 개발하고 있지만, 제 웹사이트 alysum은 완전히 nuxt로 구동되고 있습니다.

알리섬: Source | Website

윈네로즈: 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
    })

기사를 읽어주셔서 감사합니다

윈네로즈 | https://github.com/WinneRose