skills.rest
omakei
omakeiCOMMUNITY
Explore all skills by this author →
Website𝕏@djomakeiGitHub

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
One-click install
npx skills add https://github.com/omakei/adonisjs-architecture-skill --skill nuxt-realtime
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
dspangenbergdspangenberg
2

echo-react-development

Configure Laravel Echo broadcasting in React applications with hooks.

Community
Advanced
ez404-36ez404-36

realtime-state

Stream backend events into a client-side Zustand store via WebSocket.

Community
Advanced
relaticlerelaticle
1.5k

echo-development

Configure Laravel Echo broadcasting with Reverb, Pusher, or Ably drivers.

Official
Intermediate
alpacahqalpacahq
108

alpaca-broker-sse-events

Manages and replays Server-Sent Event streams from the Alpaca Broker API.

Official
Advanced