Getting Started

DevTools

The "Realtime" Nuxt DevTools tab for inspecting connections, storage, and events.

Nuxt Realtime adds a "Realtime" tab to Nuxt DevTools showing what's happening on the wire while you develop: active connections, subscribed channels and storage keys per socket, live storage values, and a scrolling event log.

It's dev-only: the tab, its backing route, and the event log are never present in production builds.

What it shows

Connections: every currently connected socket, its address, transport, and how long it's been connected.
Channels & storage keys: per connection, which useRealtimeEvents channels and useRealtimeState/useRealtimeConnection storage keys it's subscribed to.
Storage: every key currently in the nuxt-realtime storage mount, its value, and how many sockets are subscribed to it.
Event log: a scrolling, in-memory log of connect, disconnect, event:subscribe/unsubscribe/publish, and storage:subscribe/unsubscribe/set. The log never includes payload/value bodies, only channel/key names, so it can't leak arbitrary application data.

The storage snapshot shown in the tab is served by an unauthenticated dev-only HTTP route. This is fine on a local dev server, but don't put secrets in nuxt-realtime storage.

Configuration

The tab is on by default whenever your app is running in dev mode. Configure the event log size, or turn it off entirely, via the devtools option:

nuxt.config.ts

export default defineNuxtConfig({
  modules: ['nuxt-realtime'],
  nuxtRealtime: {
    devtools: {
      eventLogSize: 500, // default: 200
    },
    // or: devtools: false
  }
})

Authentication

Authenticate and authorize Socket.IO clients using the nuxt-realtime:io hook.

useRealtimeState

Share reactive state across all connected clients with configurable sync strategies.