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 unstorage 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>
<p>Connection: {{ status }}</p>
<p>Counter: {{ counter }}</p>
<button @click="counter++">Increment</button>
<button @click="sendNotification">Send Notification</button>
</div>
</template>