nuxt-realtime

Integrate Laravel Echo WebSocket streams into Nuxt 3 applications.

2|1|Updated Mar 16, 2026

Search Tags:#real-time #channels #presence #events #websocket #nuxt #laravel-echo

Ready to run

npx skills add https://github.com/omakei/adonisjs-architecture-skill --skill nuxt-realtime

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: nuxt-realtime
Source: https://github.com/omakei/adonisjs-architecture-skill/tree/main/nuxt/skills/nuxt-realtime
Command: npx skills add https://github.com/omakei/adonisjs-architecture-skill --skill nuxt-realtime

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Real-time features for Nuxt applications enabling live updates via Laravel Echo and WebSockets to keep UI in sync with server events.

Core Features & Use Cases

Subscribe to private and presence channels
Listen for events such as PostCreated, PostUpdated, PostDeleted
Manage channel subscriptions and cleanup on unmount to avoid leaks

Quick Start

Configure the nuxt-laravel-echo module in your Nuxt project and start subscribing to channels using useRealtime to receive live updates.

Frequently Asked Questions about nuxt-realtime

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I integrate real-time WebSocket updates into a Nuxt application?▼

Real-time WebSocket updates are integrated into Nuxt using Laravel Echo to subscribe to channels and react to server events. The module-based configuration enables live UI synchronization for pages and components requiring event-driven refreshes.

Can I subscribe to private and presence channels with Laravel Echo in Nuxt 3?▼

Private and presence channels are fully supported for Nuxt 3 projects using Laravel Echo. Subscriptions are managed within components to handle live user presence states and secure event broadcasting.

How do I manage channel subscriptions and cleanup on unmount in Nuxt to avoid memory leaks?▼

Channel subscription cleanup on component unmount is handled automatically to prevent memory leaks. Reliable real-time capabilities are ensured by managing event listeners and channel teardown when components are destroyed.

What is the best way to listen for specific events like PostCreated or PostUpdated in Nuxt?▼

Listening for events like PostCreated, PostUpdated, and PostDeleted is achieved by configuring the nuxt-laravel-echo module and using useRealtime. This approach binds event listeners to channels for immediate UI refreshes.

Does this real-time approach require any specific backend framework to work with Nuxt?▼

The real-time approach relies on Laravel Echo and WebSocket streams, requiring a compatible backend broadcasting events. Nuxt subscribes to these channels to keep the UI in sync with server-side data changes.