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

1. Add @virenbar/nuxt-lanyard dependency to your project

   # Using npm
   npm install --save-dev @virenbar/nuxt-lanyard
   # Using yarn
   yarn add --dev @virenbar/nuxt-lanyard
   # Using pnpm
   pnpm add -D @virenbar/nuxt-lanyard

2. Add @virenbar/nuxt-lanyard to the modules section of nuxt.config.ts

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

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

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>

Development

# 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