Nuxt Real-time

WebSocket real-time updates via Laravel Echo.

Core Concepts

realtime.md - Complete real-time patterns

Configuration

// 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

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

// 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'