/nuxt-lanyard

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

Primary LanguageTypeScript

Nuxt Lanyard

npm version npm downloads License Nuxt

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

The useLanyard composable returns a reactive state containing lanyard data.

The $lanyard plugin provides resolving/formatting function.

Features

  • 🏷️ 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