# Nuxt Realtime

> Real-time features with Laravel Echo and WebSockets. Use when subscribing to channels, listening for events, implementing live updates, or managing channel subscriptions.

- **Type:** Skill
- **Install:** `agentstack add skill-leeovery-agentic-skills-nuxt-realtime`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [leeovery](https://agentstack.voostack.com/s/leeovery)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [leeovery](https://github.com/leeovery)
- **Source:** https://github.com/leeovery/agentic-skills/tree/main/nuxt/skills/nuxt-realtime

## Install

```sh
agentstack add skill-leeovery-agentic-skills-nuxt-realtime
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

# Nuxt Real-time

WebSocket real-time updates via Laravel Echo.

## Core Concepts

**[realtime.md](references/realtime.md)** - Complete real-time patterns

## Configuration

```typescript
// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['nuxt-laravel-echo'],

  runtimeConfig: {
    public: {
      echo: {
        key: undefined,    // NUXT_PUBLIC_ECHO_KEY
        host: undefined,   // NUXT_PUBLIC_ECHO_HOST
        scheme: undefined, // NUXT_PUBLIC_ECHO_SCHEME
        port: undefined,   // NUXT_PUBLIC_ECHO_PORT
      },
    },
  },
})
```

## Channel Subscriptions

```typescript
const { privateChannel, presenceChannel, leaveChannel } = useRealtime()

// Subscribe to channel
const channel = privateChannel('posts.{id}', postId)

// Listen for events
channel.on('PostUpdated', (event) => {
  refresh()
})

// Multiple events
channel.on(['PostCreated', 'PostUpdated', 'PostDeleted'], refresh)

// Cleanup
onUnmounted(() => {
  leaveChannel('posts.{id}', postId)
})
```

## Constants

```typescript
// app/constants/channels.ts
export const Posts = 'posts'
export const Post = 'post.{post}'

// app/constants/events.ts
export const PostCreated = 'PostCreated'
export const PostUpdated = 'PostUpdated'
```

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [leeovery](https://github.com/leeovery)
- **Source:** [leeovery/agentic-skills](https://github.com/leeovery/agentic-skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-leeovery-agentic-skills-nuxt-realtime
- Seller: https://agentstack.voostack.com/s/leeovery
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.