Frameworks
Vue
Vue 3 and Nuxt
[Overview](../) · Framework Integrations
The Vue adapter exposes a usePresence() composable with reactive data, loading, and error refs. It connects on mount and disconnects when the component unmounts.
Install
pnpm add @iconical/presenceVue single-file component
<script setup lang="ts">
import { usePresence } from "@iconical/presence/vue";
const { data, loading, error, refresh } = usePresence({
userId: "123456789012345678", // Approved Discord ID.
transport: "auto",
});
</script>
<template>
<section>
<p v-if="loading">Connecting…</p>
<p v-else-if="error">Presence unavailable</p>
<template v-else-if="data">
<h2>{{ data.profile.displayName }}</h2>
<p>{{ data.presence?.status ?? "Waiting for update" }}</p>
<p v-if="data.spotify">Listening to {{ data.spotify.song }}</p>
<button type="button" @click="refresh">Reconnect</button>
</template>
</section>
</template>The composable starts networking only after the component mounts. refresh() restarts it; unmounting disposes it automatically.
Browser lifecycle
The Vue composable starts on mount and disposes itself on unmount. It does not subscribe during server-side rendering.
Nuxt integration
Place the component in the client-rendered part of a Nuxt application. For an explicitly client-only display, wrap it in
<template>
<ClientOnly fallback="Loading Discord presence…">
<DiscordPresence />
</ClientOnly>
</template>The data ref may contain availability: "pending" with presence: null; treat that as waiting for a snapshot, not an offline user.
Show a team
The Vue entrypoint also exports usePresences({ userIds, transport?, intervalMs? }). It returns the same data, loading, error, and refresh pattern, with data.value.presences keyed by approved Discord ID.
For dynamic roster changes, create a new composable instance for a different fixed input or use the core shared connection manager. A plain JavaScript mutation of the input userIds array does not automatically reconfigure the current composable.
Next steps
Read the API reference for transport settings and Privacy for consent requirements.
Was this page helpful?