0111-nuxt-realtime

To add realtime updates to a Nuxt application, wire Laravel Echo channel listeners to UI refresh logic using a composable. Configure Echo connection parameters via Nuxt runtimeConfig, subscribe to channels, and update pages when domain events arrive.

Listen for PostCreated and PostUpdated events in Nuxt realtime subscriptions by creating private or presence channel subscriptions. The subscription triggers UI updates and refreshes queries automatically when these domain events fire from the server.

Configure Laravel Echo connection settings in Nuxt runtimeConfig by centralizing the key, host, scheme, and port parameters. Use Nuxt public runtime configuration combined with environment variables to manage these connection settings safely.

Duplicate event listeners occur when websockets in Nuxt components are not cleaned up properly. Use the onUnmounted lifecycle hook to leave channels and unsubscribe, preventing duplicated handlers and stale updates during navigation.

Yes, you can use presence channels for realtime updates in a Nuxt app. The subscription mechanism applies to both private and presence channel scenarios, allowing you to listen for events and update lists as users join or leave.

The best way to handle channel subscriptions cleanup in Nuxt realtime applications is using the onUnmounted hook. Call the leave channel function from your useRealtime composable to safely unsubscribe and prevent duplicate handlers.