Getting Started
Introduction
Real-time state synchronization for Nuxt applications.
Nuxt Realtime is a module that provides real-time state synchronization for Nuxt applications using Socket.IO. It allows you to share reactive state across all connected clients with a simple composable API.
Early Development Warning: this module is currently in early development and is not ready for production use. APIs may change without notice, and features may be incomplete or unstable.
Features
- Real-time State Sync: share reactive state across all connected clients automatically
- Pub/Sub Events: broadcast events to other clients using publish/subscribe pattern
- Connection Management: monitor connection status with reactive state and callbacks
- Optimistic Updates: instant UI feedback with automatic rollback on failure
- Pluggable Storage: use memory, Redis, or any Nitro-supported storage driver for persistence
- Built on Socket.IO: reliable WebSocket connections with automatic reconnection
Composables
Nuxt Realtime provides three main composables:
Quick Example
app.vue
<script setup>
// Shared state, automatically synced across all clients
const counter = useRealtimeState('counter', 0)
// Connection status
const { connected, status } = useRealtimeConnection()
// Pub/sub events
const { subscribe, publish } = useRealtimeEvents()
subscribe('notifications', (data) => {
console.log('Received notification:', data)
})
function sendNotification() {
publish('notifications', { message: 'Hello from another client!' })
}
</script>
<template>
<div class="space-y-2">
<p>Connection: <UBadge :color="connected ? 'success' : 'error'" variant="subtle">{{ status }}</UBadge></p>
<p>Counter: {{ counter }}</p>
<UButton @click="counter++">Increment</UButton>
<UButton color="neutral" @click="sendNotification">Send Notification</UButton>
</div>
</template>