0111-nuxt-realtime
CommunityBring live updates to your Nuxt app.
Software Engineering#websockets#nuxt#event listeners#laravel echo#realtime updates#channel subscriptions#presence channels
AuthorMrJmpl3
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill solves the problem of adding reliable real-time UI updates by subscribing to Laravel Echo channels and reacting to events without manual refresh.
Core Features & Use Cases
- Channel subscriptions: Create private and presence channel subscriptions and listen for one or multiple events to trigger UI updates (e.g., refreshing data when records change).
- Event-driven live updates: Handle domain events like post created/updated/deleted to keep pages and lists in sync with server state.
- Safe lifecycle cleanup: Unsubscribe from channels on component unmount to prevent duplicated listeners and stale updates.
- Configuration via Nuxt runtimeConfig: Centralize Echo connection settings (key/host/scheme/port) using Nuxt public runtime configuration and environment variables.
Quick Start
Use the 0111-nuxt-realtime Skill to connect Laravel Echo in your Nuxt app, subscribe to a channel for a specific resource (for example posts for a given id), refresh your query when events fire, and leave the channel when the page unmounts.
Dependency Matrix
Required Modules
None requiredComponents
references
💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: 0111-nuxt-realtime Download link: https://github.com/MrJmpl3/codex_____data_____configuration/archive/main.zip#0111-nuxt-realtime Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.