@virenbar/nuxt-lanyard

Nuxt Lanyard

A Nuxt module to track your Discord status using Lanyard API.

The useLanyard composable returns a reactive state containing lanyard data.

The useLanyardHelper composable provides resolving/formatting functions.

• ✨ Release Notes
• 🏀 Online playground

Features

• 🚧 Support Nuxt 3 and Nuxt 4
• 🏷️ Single composable for fetching lanyard data
• 🌐 REST/WebSocket support
• 🧹 Socket/Connection auto close on unmount
• 📃 Resolving/Formatting functions

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxt module add @virenbar/nuxt-lanyard

That's it! You can now use Nuxt Lanyard in your Nuxt app ✨

Self-hosted lanyard

export default defineNuxtConfig({
  modules: [
    '@virenbar/nuxt-lanyard'
  ],
  // Set apiURL for self-hosted lanyard
  lanyard: {
    apiURL: "api.lanyard.rest"
  }
})

Usage

REST

// Subscribe to user
const L = useLanyard({ method: "rest", id: "94490510688792576" });

// Use an interval of 10s (default 5s)
const L = useLanyard({
  method: "rest",
  pollInterval: 10e3,
  id: "94490510688792576"
});

WebSocket

// Subscribe to single user
const L = useLanyard({ method: "ws", id: "94490510688792576" });

// Subscribe to multiple users
const LM = useLanyard({
  method: "ws", ids: [
    "132479201470185472",
    "94490510688792576"
  ]
});

// Subscribe to all users tracked by Lanyard
const LM = useLanyard({ method: "ws", all: true });

Template

Single user

<template>
  <div>
    <span>User:</span> <b> {{ L?.discord_user.username }}#{{ L?.discord_user.discriminator }}</b>
  </div>
</template>

Multiple users

<template>
  <div v-for="L in LM" :key="L.discord_user.id">
    <span>User:</span> <b> {{ L?.discord_user.username }}#{{ L?.discord_user.discriminator }}</b>
  </div>
</template>

Contribution

# Install dependencies
yarn install
# Generate type stubs
yarn dev:prepare
# Develop with the playground
yarn dev
# Build the playground
yarn dev:build
# Run ESLint
yarn lint
# Run Vitest
#yarn test
#yarn test:watch
# Release new version
yarn release

Thanks

• Phineas - Creator of Lanyard API
• eggsy - Creator of vue-lanyard
• nebulatgs - Creator of sk-lanyard